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

catalogue

transition over animation

Multi attribute value transition

  2d deformation transform

translation

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

  zoom

  rotate

tilt

Modify the properties of the deformation center

Compound writing of deformation attributes  

  3D deformation animation

3d translation

Depth of field attribute (sight distance)

3D rotation

Rotate about X axis:

  Rotate about Y axis:

Rotate around Z axis

Rotate around surface

Rotation around body

Back hide attributes

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

Keyframe animation (gap animation)

  definition

css3 animation library animation.css

transition over animation

Transition: attribute name to transition   Duration s   Delay time 0s   Motion curve; Who makes the change and writes it to who!

            (1) Write it on the box   After the event is triggered, the transition animation is executed in reverse order once   Final - initial plus transition!!

            (2) Generally speaking, the event triggers: hover: active

                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