CSS3 animáció létrehozása

CSS3 animációk esetén kötelező megadni az animáció nevét, amely meg kell egyezzen a @keyframes deklarációban megadott névvel. Ez teszi lehetővé a kulcskockák és az animáció összerendelését.

Az animáció nevének beállítása:

kijelölő

{

animation-name

animacio_neve

;}

A animation-duration tulajdonság segítségével meg kell adni, hogy az animáció az első kulcskockától indulva mennyi idő alatt jut el az utolsóig. Megadható másodpercben vagy ezred másodpercben.

Az animáció időtartamának beállítása:

kijelölő

{

animation-duration

érték;

}

Az időtartam megadása kötelező. Mértékegysége lehet s vagy ms.

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;
}
#palya div.linear_1 img {
          animation-name: labda_1;
  -webkit-animation-name: labda_1;
          animation-duration: 5s;
  -webkit-animation-duration: 5s;
} 
#palya div.linear_2 img{
          animation-name: labda_1;
  -webkit-animation-name: labda_1;
          animation-duration: 8s;
  -webkit-animation-duration: 8s;
}
</style>    
...
<body>   
  <div id="palya" class="palya" >
    <div>Időtartama: 3s
      <div class="linear"><img src="...” ...> </div>
    </div>
    <div>Időtartama: 5s
      <div class="linear_1"><img src="...” ...> </div>
    </div>
    <div>Időtartama: 8s
      <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_01.html