HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

CSS3 animáció ismétlése



Az animation-iteration-count tulajdonság segítségével megadható, hogy hányszor ismétlődjön meg az animáció. A infinite kulcsszó esetén végtelen számú ismétlést írunk elő, tehát amíg létszik az adott elem a képernyőn addig az animáció is újra és újra indul.

Az animáció ismétléseinek beállítása:

kijelölő
{
animation-iteration-count
:
érték
;}

Az infinite kulcsszó megadása esetén az ismétlések száma végtelen.

1. Példa:

Forráskód



<style>
@keyframes labda_1 { 
    0% {transform: translateX(1px) rotate(1deg);}
  100% {transform: translateX(350px) rotate(350deg);}
}
@-webkit-keyframes labda_1 { 
  0% { 
   -webkit-transform: translateX(1px) rotate(1deg);}
  100% {
   -webkit-transform: translateX(350px) rotate(350deg);}
}
#palya div.linear img {
          animation-name: labda_1;
  -webkit-animation-name: labda_1;
          animation-duration: 3s;
  -webkit-animation-duration: 3s;
          animation-iteration-count: 3;
  -webkit-animation-iteration-count: 3;
}
#palya div.linear_1 img {
          animation-name: labda_1;
  -webkit-animation-name: labda_1;
          animation-duration: 5s;
  -webkit-animation-duration: 5s;
          animation-iteration-count: 10;
  -webkit-animation-iteration-count: 10;
} 
#palya div.linear_2 img{
          animation-name: labda_1;
  -webkit-animation-name: labda_1;
          animation-duration: 8s;
  -webkit-animation-duration: 8s;
          animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

</style>    
...
<body>   
  <div id="palya" class="palya" >
    <div>Ismétlések száma: 3
      <div class="linear"><img src="...” ...> </div>
    </div>
    <div>Ismétlések száma: 10
      <div class="linear_1"><img src="...” ...> </div>
    </div>
    <div>Ismétlések száma: végtelen
      <div class="linear_2"><img src="...” ...> </div>
    </div>    
 </div>

</body>
 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css3_labda_animacio_ismetles_01.html