CSS3 Key-Frame animations

Key-Frame animations:

Keyframe: The special state of an object in a position during the execution of an animation
Keyframe Animation: Controls the continuous state change of an object using continuous keyframes
When to use key-frame animations:
Continuous, regular transitions--transition transition
Irregular continuous change--animation animation
How to achieve: 2 steps:
1. Define keyframes:
@keyframes Animation Name {
from{Start Style}
N%{the style when the animation progress is played to n%}
...
to{End Style}
}
2. Triggering animations:
Animation: Animation name duration speed type
How to use: write in a non-pseudo class selector that automatically triggers after a page is loaded
Write in pseudo class, only play when Pseudo class is triggered

Browser compatibility: @keyframes animation Firefox IE
@-webkit-keyframes-webkit-animation Chrome Safari
@-o-keyframes-o-animation Opera

* Make the animation maintain the last frame state: Animation after +forwards*
* Loop Playback: infinite*
* Alternate round-trip playback: Alternate
Single-digit forward playback
Double number of times reverse back *
How to pause an animation: animation-play-state:paused
To use: Add to the Pseudo-class of the element that is playing the animation

Ido (Shenzhen) Media Co., Ltd.

Look at the new angle of the world

: Edoyojoy

Weibo: Http://weibo.com/EDOYOJOY

Official website: http://www.edovis.com/

CSS3 Key-Frame animations