Prev Demo
Animation Iteration Count
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title></title> <style> div { width: 100px; height: 100px; background: red; position: relative; /*for chrome and safari*/ -webkit-animation: function 1s; -webkit-animation-iteration-count: 3; /*for firefox*/ -moz-animation: function 1s; -moz-animation-iteration-count: 3; /* for opera */ -o-animation: function 1s; -o-animation-iteration-count: 3; /* Standard syntax */ animation: function 1s; animation-iteration-count: 3; } @-webkit-keyframes function { from { background-color: green; top: 0px; } to { background-color: orange; top: 200px; } } @-moz-keyframes function { from { background-color: green; top: 0px; } to { background-color: orange; top: 200px; } } @-o-keyframes function { from { background-color: green; top: 0px; } to { background-color: orange; top: 200px; } } @keyframes function { from { background-color: green; top: 0px; } to { background-color: orange; top: 200px; } } </style> </head> <body> <h2>Animation iteration count</h2> <div></div> </body> </html>
Note: We DO NOT save your trial code in our database.
Output