CSS3 animation (CSS3 Frame animation)

Email: gm4linus@gmail.com

In the past, DOM animation in the browser was implemented through js. CSS 3 now provides the animation function, I .e., animation. The following is an example of a progress bar to illustrate how to use it.

 

First, create a small HTML clip.

 

 

 

 

Next, write CSS.

 

. Animation {/* defines CSS3 animation */-webkit-animation-name: animation-name;/* specifies the animation name, which is used with keyiframes */-webkit-animation-duration: 10 s;/* animation duration */-webkit-animation-timing-function: linear;/* animation playback mode, the current value is linear */-webkit-animation-iteration-count: infinite;/* Number of animation playback times. The current value is an infinite loop */-webkit-animation-delay: 2 s; /* animation delay start time */-webkit-animation-direction: 'normal';/* playback direction * // *-webkit-animation-play-state: 'running '; playback status */animation-name: animation-name; animation-duration: 10 s; animation-timing-function: linear; animation-iteration-count: infinite ;} @-webkit-keyframes animation-name {/* CSS3 Frame animation timeline, compatible with webkit private attributes */0% {width: 0 ;}100% {width: 100% ;}} @ keyframes animation-name {/* CSS3 Frame animation timeline */0% {width: 0;} 100% {width: 100% ;}}. wp. inner {/* CSS2 */display: inline-block; width: 0; height: 20px; border-radius: 4px; background-color: # 5bc0de ;}

In this way, the inner and animation class can be applied.

N/index.html