animation-iteration-count property in CSS3
animation-iteration-count property is used to defines how many
times an animation should be played. We can't use this property in the Internet
Explorer and Opera.
Ex:
- <html>
-
- <head>
- <style type="text/css">
- div
- {
- width: 100px;
- height: 100px;
- background: pink;
- position: relative;
- animation: mycssmove 5s;
- animation-iteration-count: 5;
-
- -webkit-animation: mycssmove 5s;
- -webkit-animation-iteration-count: 5;
- }
-
-
- -moz-animation:mycssmove 5s;
- -moz-animation-iteration-count:5;
-
- @keyframes mycssmove
- {
- from
- {
- top: 0px;
- }
-
- to
- {
- top: 100px;
- }
- }
-
- @-webkit-keyframes mycssmove
-
-
- {
- from
- {
- top: 0px;
- }
-
- to
- {
- top: 100px;
- }
- }
-
- @-moz-keyframes mycssmove
-
-
- {
- from
- {
- top: 0px;
- }
-
- to
- {
- top: 100px;
- }
- }
- </style>
- </head>
-
- <body>
- <div></div>
- </body>
-
- </html>