Summary and analysis of CSS3 animation effect

CSS3 has the following three animation features:

1. Transition (excessive attribute)
2, Animation (animation properties)
3, Transform (2d/3d conversion properties)

Here is a description of my understanding:

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:
Transition Transition effect

<! DOCTYPE html>
2, animation properties animation

Animation:name Duration timing-function delay iteration-count direction;


 

 
  
 
   
 
    
Value
 
    
Describe
 
   
 
   
 
    
Animation-name
 
    
Specifies the name of the keyframe that needs to be bound 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:
The animation effect of CSS3

<! 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 P block, the right edge of the screen in the rotation of 45deg, that should be set to: Transform:rotatey (45deg).

Instance:

Transform3D Conversion Effect

<! DOCTYPE html>
Use the Transform-origin property to adjust the center of rotation. The default rotation center point is the positive center of the P 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).

The above CSS3 animation effect Summary (recommended) is a small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support a lot of topic.alibabacloud.com.