Post
Ask Question

animation-iteration-count property in CSS3

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:
  1. <html>  
  2.   
  3.    <head>  
  4.       <style type="text/css">  
  5.       div   
  6.       {  
  7.          width: 100px;  
  8.          height: 100px;  
  9.          background: pink;  
  10.          position: relative;  
  11.          animation: mycssmove 5s;  
  12.          animation-iteration-count: 5;  
  13.          /* Safari and  Google Chrome */  
  14.          -webkit-animation: mycssmove 5s;  
  15.          -webkit-animation-iteration-count: 5;  
  16.       }  
  17.   
  18.       /* Mozilla Firefox */  
  19.       -moz-animation:mycssmove 5s;  
  20.       -moz-animation-iteration-count:5;  
  21.   
  22.       @keyframes mycssmove   
  23.       {  
  24.          from   
  25.          {  
  26.             top: 0px;  
  27.          }  
  28.   
  29.          to   
  30.          {  
  31.             top: 100px;  
  32.          }  
  33.       }  
  34.   
  35.       @-webkit-keyframes mycssmove  
  36.   
  37.       /* Google Chrome and Safari */  
  38.          {  
  39.          from   
  40.          {  
  41.             top: 0px;  
  42.          }  
  43.   
  44.          to   
  45.          {  
  46.             top: 100px;  
  47.          }  
  48.       }  
  49.   
  50.       @-moz-keyframes mycssmove  
  51.   
  52.       /* Mozilla Firefox */  
  53.          {  
  54.          from   
  55.          {  
  56.             top: 0px;  
  57.          }  
  58.   
  59.          to   
  60.          {  
  61.             top: 100px;  
  62.          }  
  63.       }  
  64.       </style>  
  65.    </head>  
  66.   
  67.    <body>  
  68.       <div></div>  
  69.    </body>  
  70.   
  71. </html> 
1.png