css3 new animation attribute (transition animation, deformation animation, keyframe animation)

Write in the event: active After the event is triggered, the transition animation ends There will be no more duration when returning to the original state!!

transition:Property name duration to be exceeded s  Delay time 0 s  Motion curve;

1. The attribute to be transitioned must have a specific value that can be calculated!! width,height,background-color,opacity...Can transition
 however display:none/block  visibility:hidden/visible  text-align:left /center Transition is not supported;

2. Duration attribute value is essential!!

3. The delay time is 0 by default s

4. Motion curve linear Uniform velocity ease Slow down(slow--fast--slow)((default)  ease-in End quickly

Multi attribute value transition

transition: width 2s 0s linear,height 1s 0s linear,opacity 1s 0s linear.....;

transition:all 1s;//If the duration delay time motion curves of all attributes to be changed are consistent, it is omitted

transition:1s;//all is omitted

2d deformation transform

Inline elements cannot be animated

translation

transform:translate(x,y) level x vertical y  +x +y -x -y
transform:translate(300px,500px);
transform:translate(50%,-50%) Half its width and height

Company: + xpx,+ypx To the positive direction of the x-axis (right) and the positive direction of the y-axis (bottom)

- xpx ,- ypx x reverse direction (left) y reverse direction (up)

+ x% Moved x% of its width to the right

50%,0% Moved half its width to the right!!

- 50%,0% Moved half its width to the left!

+ y% Moved down y% of its height

+ 50% Moved down half its height!!!

rem

transform:translate(2rem,-3rem)

Application: realize centering (it is not required to know the width and height of the box)

div {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

zoom

transform:scale(w,h); w,h=0  w<1 narrow w>1 enlarge
transform:scale(1.2);Equal scale magnification
           w: Is a multiple of the width
           h: Is a multiple of the height
           w=h Then just write a value!!!
            transform: scale(2,2);=== transform: scale(2);
            w,h>1 enlarge
            w,h<1 narrow
            w,h = 1 No change
            w,h=0 No, it's gone

Apply: display fonts smaller than 12px

Default font: font size: 12px display 10px font block in line + box of block type + transform:scale(10/12);

rotate

transform:rotate(ndeg);+ndeg Clockwise rotation -ndeg Counterclockwise rotation

Rotate the reference origin (center point) to the center of the box center/50% 50%)

When you write only one value, the second value defaults to center

tilt

transform:skew(xdeg,ydeg); xdeg stay x The axis is tilted in degrees xdeg  y stay y The shaft is tilted

-xdeg stay x Positive tilt
+xdeg stay X Tilt in negative direction
 +ydeg toward y The axis is tilted in the negative direction -ydeg toward y Positive tilt of axis
transform:skew(xdeg) only x Axis tilt

Modify the properties of the deformation center

d,3d Modify deformation Center
           transform-origin:center center(Default, center)
           xpx ypx/ x% y% /right top bottom left center
           transform-origin:100% 0%; Change the deformation center to the upper right corner of the box

Compound writing of deformation attributes

Change styles can be written in a compound way, such as transform: scale() translate() skew() rotate();

Changing the order of multiple style values within a style can lead to completely different results

transform:translateX(200px) translateY(300px) rotate(45deg);

transform:rotate(45deg) translateX(200px) translateY(300px) ;

3D deformation animation

3d coordinate system -- left hand rule index finger (y), middle finger (z) thumb (x)

3d translation

ttransform:translate3d(x,y,z);z Represents along z translation +z Move in positive direction -z Negative direction movement

transform:translateX(300px);
transform:translateY(300px);
transform:translateZ(300px);

transform:translate3d(300px,300px,300px);
transform:translateX(300px) translateY(300px) translateZ(300px);(Chronological order)

Unit px / % / rem

x Translate along the X axis

+ zpx Translate in the positive direction of the Z axis (the Z axis is directly in front of the deformation box) Come out of the screen + z Go to screen -z)

Depth of field attribute (sight distance)

Not for 0 sight distance -- "form a 3d effect, 3d space --" near large far small

perspective:800px;( 600px--1000px) 800px It means your eyes to 3 d There are 800 deformed objects px Distance

Make sure that the depth of field distance from your eyes to the box is the same!!

You just write the depth of field on the box. Box!

one Write it on the parent box perspective:600px;

two Write it on yourself Add to deformation attributes perspective()

 transform:perspective(500px)  rotateY(30deg);

one Generally, it is set to the parent box of the deformation element, that is, the depth of field is used to create a 3d effect when the event is triggered

3D rotation

transform:rotate3d(x,y,z,ndeg);
x:1/0 1:along X The axis has a rotation of 0 x The shaft does not rotate
y:1/0 1:along y The axis has a rotation of 0 y The shaft does not rotate
z:1/0 1:along z The axis has a rotation of 0 z The shaft does not rotate
 x: 1/200/300  Representative in x There is rotation on the shaft
        x: 0 Representative in x There is no rotation on the shaft

ndeg Represents the number of degrees of rotation

Rotate about X axis:

transform:rotate3d(1,0,0,45deg); Around x The shaft rotates 45 deg
 Equivalent to transform:rotateX(45deg);

Rotate about Y axis:

transform:rotate3d(0,1,0,45deg); Around y The shaft rotates 45 deg
 Equivalent to transform:rotateY(45deg);

Rotate around Z axis

transform:rotate3d(0,0,1,45deg); Around z The shaft rotates 45 deg
 Equivalent to transform:rotateZ(45deg);

Rotate around surface

transform:rotate3d(1,1,0,45deg); Around x Shaft and y The plane diagonal composed of the axis rotates by 45 deg

Rotation around body

transform:rotate3d(1,1,1,45deg); Around x Shaft and y Shaft and z The body composed of the shaft rotates diagonally by 45 deg

Back hide attributes

 backface-visibility: hidden hide/visible Visible(default);

When does one side become the opposite?

Rotate 180deg or - 180deg Browsers think it's the opposite

Keep 3d state (used to display 3d effect when no event is triggered)

transform-style:preserve-3d Reserved 3 d effect/flat Back to 2 d State (return to original state default)

No mouse events are required You can maintain the degree of rotation!!

Event de triggering : hover : Active (transition) + Depth of field creates 3d space!!

Without event triggering + Keep the attributes of 3d effect and create 3d space!!!

Keep the properties of 3d effects:

Transform style: preserve-3d / flat

Also write on the parent box!!!

Keyframe animation (gap animation)

Trolley turn back: initial state (100px, 100px) - -- > install it in front of the tree (400px, 400px) - -- > turn around (300px, 300px) - -- > initial position

Animation: persistence of multiple states!!! Event triggering is not required

definition

@keyframes The name of the animation {
    //Several key states  
    0% {
        //Initial state 
        css code;
    }
    .....
    n%{
        
    }
   
    100% {
        //Final state
    }
    
}

animation:Name of the animation duration [time delay of the motion curve, number of times of execution, whether the state of back and forth motion, the state of the last frame of the animation];  


The name of the animation animation-name:The name of the animation;
Duration animation-duration:ns;
Curve of motion animation-timing-function:linear/ease/ease-in/ease-in-out..
Time delay animation-delay: ns;
Number of executions  animation-iteration-count:1 default/2/3/infinite;
Round trip animation-direction:normal No round trip/alternate return
 State of motion animation-play-state:running play/paused stop it

The state of the last frame of the animation animation-fill-mode: forwards The animation remains at the last frame/backwards The animation returns to the first frame    both:When the animation is not executed, keep the state of the first frame of the animation. After execution, keep the state of the last frame!

css3 animation library animation.css

website: Animate.css | A cross-browser library of CSS animations.

Import animation library:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

Use animation

<h1 class="animate__animated animate__bounce">An animated element</h1>

Tags: css3 html5 html

Posted on Tue, 12 Oct 2021 14:00:34 -0400 by Ibnatu

Programmer Help