animation-play-state

animation-play-state
CSS animation-play-state Property
The CSS animation-play-state property allows us to pause and resume animations. We can use JavaScript to affect this and any other CSS properties while animations are running. Setting a paused animation to "running" will resume the animation from the point it was paused.

Possible Values
animation-play-state: running | paused

NOTE: We must use browser specific prefixes until this property is standardized. Once this property is working in all browser software without prefixes, we can remove all of the prefixes. Use all four of the following prefixes, then add the standard property last. This assures it will work in most browsing environments even after this property is a standard.
-webkit-animation-play-state (Chrome and Safari)
-moz-animation-play-state (Firefox)
-ms-animation-play-state (Internet Explorer)
-o-animation-play-state (Opera)
animation-play-state (Standard)

Pause a specific animation:

<!DOCTYPE html>
<html>
<style type="text/css">
div#box1 {
    -webkit-animation-name: box-move, box-color;
    -webkit-animation-play-state: paused, running;
    -webkit-animation-duration: 5s, 2s;
    -webkit-animation-iteration-count: infinite, infinite;
    background:#D3F7FE;
    border:#000 1px solid;
    width:100px;
    height:100px;
    position:relative;
    left: 0px;
    top: 0px;
}
@-webkit-keyframes box-move {
    50% { left: 25%;  }
    100% { left: 0px; }
}
@-webkit-keyframes box-color {
    25% { background: #FF0; }
    50% { background: #F0F; }
    75% { background: #0C0; }
    100% { background: #D3F7FE; }
}
</style>
<body>
<div id="box1">BOX 1</div>
</body>
</html>
click here to code.
animation-play-state

0 Response to "animation-play-state"

Post a Comment
