VISSZA
MENÜ
TOVÁBBAz 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