animation-iteration-count
CSS animation-iteration-count Property
The CSS animation-iteration-count property specifies how many cycles an animation will run. To make it run as a loop we use "infinite", to specify the cycle amount exactly we use a whole number. If you omit this property the animation will run one cycle by default. If you use a decimal number the animation will be offset or chopped by the fraction specified.
Possible Values
animation-iteration-count: infinite | Whole_Number | Decimal_Number
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-iteration-count (Chrome and Safari)
- -moz-animation-iteration-count (Firefox)
- -ms-animation-iteration-count (Internet Explorer)
- -o-animation-iteration-count (Opera)
- animation-iteration-count (Standard)
<!DOCTYPE html>
<html>
<style type="text/css">
div#box1 {
-webkit-animation-name: box-animate;
-webkit-animation-iteration-count: 2;
-webkit-animation-duration: 5s;
background:#D3F7FE;
border:#000 1px solid;
width:100px;
height:100px;
position:relative;
left: 0px;
top: 0px;
}
@-webkit-keyframes box-animate {
25% { left: 200px; top: 0px; }
50% { left: 200px; top: 200px; }
75% { left: 100px; top: 100px; }
100% { left: 0px; top: 0px; }
}
</style>
<body>
<div id="box1">BOX 1</div>
</body>
</html>
0 Response to "animation-iteration-count"
Post a Comment