animation-duration
CSS animation-duration Property
The CSS animation-duration property is used to specify the amount of time that an animation cycle takes to run through before the next iteration begins. It directly affects the speed of your animation. We use whole numbers or decimal numbers followed by a lowercase "s" which represents seconds.
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-duration (Chrome and Safari)
- -moz-animation-duration (Firefox)
- -ms-animation-duration (Internet Explorer)
- -o-animation-duration (Opera)
- animation-duration (Standard)
<!DOCTYPE html>
<html>
<style type="text/css">
div#box1 {
-webkit-animation-name: box-animate;
-webkit-animation-duration: 2.5s;
-webkit-animation-iteration-count: 3;
background:#D3F7FE;
border:#000 1px solid;
width:150px;
height:150px;
position:relative;
left: 0px;
}
@-webkit-keyframes box-animate {
50% { left: 0px; }
50% { left: 500px; }
}
</style>
<body>
<div id="box1">BOX 1</div>
</body>
</html>
0 Response to "animation-duration"
Post a Comment