animation-fill-mode
CSS animation-fill-mode Property
The CSS animation-fill-mode property defines what values are applied by the animation outside the time it is running(before and after animation runs). This allows us to specify how our animation should begin, end, and behave according to keyframes we establish.
Possible Values
animation-fill-mode: none | forwards | backwards | both
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-fill-mode (Chrome and Safari)
- -moz-animation-fill-mode (Firefox)
- -ms-animation-fill-mode (Internet Explorer)
- -o-animation-fill-mode (Opera)
- animation-fill-mode (Standard)
<!DOCTYPE html>
<html>
<style type="text/css">
div#box1 {
-webkit-animation-name: box-animate;
-webkit-animation-fill-mode: forwards;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
background:#D3F7FE;
border:#000 1px solid;
width:150px;
height:150px;
position:relative;
left: 0px;
top: 0px;
}
@-webkit-keyframes box-animate {
25% { left: 300px; top: 0px; }
50% { left: 300px; top: 300px; }
75% { left: 500px; top: 200px; }
100% { left: 0px; top: 200px; }
}
</style>
<body>
<div id="box1">BOX 1</div>
</body>
</html>
0 Response to "animation-fill-mode"
Post a Comment