CSS3 animation

CSS3 Animation

CSS3 Animation

CSS3, we can create animations, which can replace many web page animated images, Flash animations, and JAVAScripts.

CSS3 @keyframes rules

To create CSS3 animations, you will have to understand the @keyframes rules.

@keyframes rule is to create animations. Specify a CSS style and animation within the @keyframes rule that will gradually change from the current style to the new style.

CSS3 Animations

When creating animations in @keyframes, bind it to a selector, otherwise the animation will have no effect.

Specify that at least two CSS3 animation properties are bound to a selector:

Specify the name of the animation

Specify the duration of the animation

     
  
注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。
 
  

@-webkit-keyframes myfirst /* Safari and Chrome */ { from {background:red;} to {background:yellow;} }  
  
注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。
 
  

What is CSS3 animation?

Animation is the effect of gradually changing an element from one style to another.

You can change as many styles as you want as many times as you like.

Please use percentage to specify the time when the change occurs, or use the keywords "from" and "to", which are equivalent to 0% and 100%.

0% is the start of the animation, 100% is the completion of the animation.

For best browser support, you should always define 0% and 100% selectors.

     
  
 
注释：当动画完成时，会变回初始的样式。
 
注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。