CSS3-animation-speaking

CSS3-animation-CSS3 animation

Define keyframes

@keyframes colorchange {    0%   { background-color: #00F; /* from: blue */ }    25%  { background-color: #F00; /* red        */ }    50%  { background-color: #0F0; /* green      */ }    75%  { background-color: #F0F; /* purple     */ }    100% { background-color: #00F; /* to: blue   */ }}@-webkit-keyframes colorchange {    0%   { background-color: #00F; /* from: blue */ }    25%  { background-color: #F00; /* red        */ }    50%  { background-color: #0F0; /* green      */ }    75%  { background-color: #F0F; /* purple     */ }    100% { background-color: #00F; /* to: blue   */ }}

For 0%, you can also use the from keyword instead. You can also use to replace 100%. You can define any percentage for the transition state;

Apply animation to the attribute Writing Method of the element, which is not much different from the transition:

P: hover {animation-name: colorchange; animation-duration: 1 s; animation-timing-function: linear; animation-delay: 1 s; animation-fill-mode: forwards; /* forwards indicates that the animation stays in the end state */animation-direction: normal; animation-iteration-count: 3;/* indicates the number of animation cycles, infinite */}/* abbreviation */p: hover {animation: 1 s 1 s rainbow linear 3 forwards normal ;}

Animation-direction has four values:

Normal: The default value is from 0% to 100%.

Reverse: the animation is executed from 100% to 0%.

Alternate: the animation is executed in a reciprocating manner between 0% and 100%;

Alternate-reverse is the same as alternate, but it starts from 100%;

Animation-play-state

Sometimes, an animation stops suddenly during playback. At this time, the default behavior is to jump back to the animation start state;

If you want to keep the animation in a state that suddenly ends, you can useAnimation-play-state: running;

Browser support

IE 10 and Firefox (> = 16) Support animation without a prefix, but chrome does not, soThe webkit prefix must be used..

That is to say, in actual use, the Code must be written as follows:

p:hover {  -webkit-animation: 1s rainbow;  animation: 1s rainbow;  }@-webkit-keyframes rainbow {  0% { background: #c00; }  50% { background: orange; }  100% { background: yellowgreen; }}@keyframes rainbow {  0% { background: #c00; }  50% { background: orange; }  100% { background: yellowgreen; }}

References:

Http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/

Http://www.w3cplus.com/content/css3-transform

Http://beiyuu.com/css3-animation/

Http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

Http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html