CSS3 @keyframes Animate

[Email protected] definitions and usage

By @keyframes rules, you can create animations.

The animation is created by gradually changing one set of CSS styles to another.

You can change this set of CSS styles several times during the animation process.

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 best browser support, you should always define the 0% and 100% selectors.

notes: Use the animation properties to control the appearance of the animation while binding the animation to the selector.

[Email protected] syntax

Animationname {keyframes-selector {css-styles;}}

3.W3C The above case, the change of multiple styles

<! DOCTYPE html> CSS3 Animation are similar to transition properties, and they all change the attribute value of an element over time. Their main difference is that transition needs to trigger an event (hover event or click event) to change its CSS properties over time, and animation can change the property value of the element CSS explicitly over time without triggering any events. So as to achieve an animation effect. This allows us to invoke animation's animated properties directly in an element, and based on this, CSS3 's animation need explicit animated attribute values, and we need to keyframes to define CSS property values at different times to achieve the effects of the elements at different time periods.  
Call the animation property to an element
 
 
 
. demo1 {     width:50px;     height:50px;     margin-left:100px;     Background:blue;     -webkit-animation-name: ' wobble ';/* animated property name, which is the animated name defined in front of us keyframes */     -webkit-animation-duration:10s;/* animation Duration */     -webkit-animation-timing-function:ease-in-out;/* animation frequency, and transition-timing-function is the same *     /- webkit-animation-delay:2s;/* Animation Delay Time *     /-webkit-animation-iteration-count:10;/* Define the loop data, infinite for infinite times *     /- webkit-animation-direction:alternate;/* Define Animation Mode */  }
 
===========================
 
Occupied:
 
/* Define rotation */
 
@-webkit-keyframes rock{        0%{transform:rotate (0deg)}        10%{transform:rotate (3deg)}        20%{Transform: Rotate ( -3deg)}        30%{transform:rotate (2deg)}        40%{transform:rotate ( -2deg)}        50%{transform:rotate (1deg) }        60%{transform:rotate ( -1deg)}        70%{transform:rotate (0deg)}        100%{transform:rotate (0deg)}    }
 
/** animate elements to be selected for dithering
 
. c_zongzi_box_rock{        -webkit-animation:rock 2s infinite;    }
 
Infinite is the infinite animated meaning of the rock definition of-webkit-keyframes's name, 2s is the time of the animation
 
Transform-origin is the base point of the animation transformation (reference point)
 
 
1. Top Left | Left top equivalent to 0 0 | 0% 0%
 
2, Top | Top Center | Center top equivalent to 50% 0
 
3, right Top | Top right is equivalent to 100% 0
 
4, left | Left Center | Center left equivalent to 0 50% | 0% 50%
 
5. Center | Center Center is equivalent to 50% 50% (default value)
 
6. Right | Right Center | Center right is equivalent to 100% 50%
 
7, Bottom left | Left bottom equivalent to 0 100% | 0% 100%
 
8, Bottom | Bottom Center | Center bottom equivalent to 50% 100%
 
9, bottom Right | Right bottom equivalent to 100% 100%
Where Left,center right is the horizontal direction value, the corresponding hundred points for left=0%;center=50%;right=100% and top center bottom is the vertical direction of the value, wherein top=0%;center=50%; bottom=100%; If only one value is taken, the vertical direction value is unchanged
 

 
CSS3 @keyframes Animate