CSS3 Animation Effect Summary

CSS3 has the following three types of animations: 1, Transition (over attribute) 2, animation (animated properties) 3, transform (2d/3d conversion properties) One after the other, I understand: 1, transition:< transition property name > < transition time > < transition mode >

such as-webkit-transition:color 1s;

Equivalent to:

-webkit-transition-property:color;

-webkit-transition-duration:1s;

The transition effect for multiple properties can be written like this:

Method 1:-webkit-transition:< Properties 1> < time 1>,< Properties 2> < time 2>,。。。

Method 2:

-webkit-transition:< Properties 1> < time 1>;

-webkit-transition:< Properties 2> < time 2>;

The value of the Transition-timing-function attribute is 5:

Ease: Slow start, slow end

Liner: Constant speed

Ease-in: Slow start

Ease-out: Slow End

Ease-in-out: Slow start, slow end (slightly different from ease)

Instance:

<! DOCTYPE html>
2, animation properties animation
Animation: name duration timing-function delay iteration-count  Direction;

 
 

  
  
 
   
 
    
 
  value  
 
 
    
 
  Description  
 
 
   
 
   
 
    
 
 Animation-name 
 
 
    
 Specifies the keyframe name to bind to the selector: 
 
 
   
 
   
 
    
 
 animation-duration 
 
 
    
 
 Specifies the amount of time, in seconds or milliseconds, that the animation will take to complete. 
 
 
   
 
   
 
    
 
 animation-timing-function 
 
 
    
 
 Specifies the speed curve of the animation. 
 
 
   
 
   
 
    
 
 Animation-delay 
 
 
    
 
 Specifies the delay before the animation begins. 
 
 
   
 
   
 
    
 
 Animation-iteration-count 
 
 
    
 
 Specifies the number of times the animation should play. 
 
 
   
 
   
 
    
 
 animation-direction 
 
 
    
 
 Specifies whether the animation should be rotated in reverse. 
 
   
 
  
 
 
Note: The animation property is not supported for Internet Explorer 9 and earlier versions.
@keyframes animationname {keyframes-selector {css-styles;}}

 
 
 
  
  
 
   
 
    
Value
 
    
Describe
 
   
 
   
 
    
Animationname
 
    
Necessary. Defines the name of the animation.
 
   
 
   
 
    
Keyframes-selector
 
    
Necessary. The percentage of the animation duration.
Valid values:
 
     
 
      
0-100%
 
      
From (same as 0%)
 
      
To (same as 100%)
 
     
 
   
 
   
 
    
Css-styles
 
    
Necessary. One or more valid CSS style attributes.
 
   
 
  
 
 
 
The time at which the change occurs is specified as a percentage, or by the keyword "from" and "to", equivalent to 0% and 100%.
0% is the start time of the animation, and the end time of the 100% animation.
For example:
Animation:mymove 5s Infinite;
@keyframes mymove{
from{top:0px;}
to{top:200px;}
}
You can also write this:
@keyframes mymove{
0%{top:0px;}
25%{top:200px;}
50%{top:100px;}
75%{top:200px;}
100%{top:0px;}
}
Case:
<! DOCTYPE html>
3. Set 3D scene (ie transform)
-webkit-perspective:800 (pixels)-The distance from the screen of a three-dimensional object.
-webkit-perspective-origin:50% 50%;(This attribute represents the vision of human eye observation. 50% 50% is the corresponding position of the x-axis and y-axis, which is the center of the screen. )
Use the Transform property to adjust the element:-webkit-transform-style:-webkit-perserve-3d; (this property tells the browser that we are manipulating elements in a three-dimensional space)
(1), translate (moving distance)
TranslateX (x px)
Translatey (y px)
Translatez (z px)
(2), rotate (rotation angle)
Rotatex (x deg)
Rotatey (y deg)
Rotatez (z deg)
Transform:rotate (45DEG)
Rotatex: Rotates inward toward the upper edge of the screen in the positive direction.
Rotatey: The vertical downward direction of the screen.
Rotatez: Positive direction to the outside of the screen.
A div block, right along the screen to rotate 45deg, that should be set to: Transform:rotatey (45deg).
Instance:
<! DOCTYPE html>
Use the Transform-origin property to adjust the center of rotation. The default rotation center point is the right center of the div box.
The center of rotation can be changed:
X axis: Left, center, right.
Y-axis: Top, center, bottom.
Z-axis: Length px (value of one).
CSS3 Animation Effect Summary