The CSS3 animation to provide a direct animation-play-state attribute specifies the animation is running or paused. Animation style when writing special attention to compatibility with different browsers, plus the corresponding prefix:
div{
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}
Only you need to have animation on an element node corresponding delete this style by dynamically increase can control the animation begins with a pause, very simple.
grammar
animation-play-state: paused|running;
paused provisions animation paused; running the provisions of the animation is playing.
compatibility:
Internet Explorer 10, Firefox and Opera support animation-play-state property. Safari and Chrome support alternative -webkit-animation-play-state property.
note:
iOS 8-9 Safari, ios11 systems, micro letter browser does not work, you can not pause the animation starts.
Workaround Use ** -webkit-animation: none! important; instead -webkit-animation-play-state: paused; **
.no-animation {
-webkit-animation：none！important;
}
A good Web front-end development engineer on the knowledge we must have breadth but also depth, so many large companies paid out even if it is difficult to recruit the ideal front-end development engineer. So how systematic study and practical web front-end technology companies do, for the establishment of a web front-end live class learning buttoned skirts, web front-end figure is seven hundred sixty-seven front, the front end of the middle number is two hundred seventy-three web, web front-end final is zero or two, it wants to connect to digital. Really want to learn can enter, soy sauce, do not waste everyone's time. Now that the focus is not to explain the technology, but more focused on the explanation of the techniques. Technical black and white, only right and wrong, and skill is a matter of opinion.