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ó 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