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ók kulcskockái



A CSS3 animációk hasonlóképp működnek, mint az átmenetek.

Kötelező a változó CSS tulajdonságok kezdeti és utolsó értékének megadása. Az animáció ezen értékek folyamatos változása révén jön létre.
(Pl. egy HTML elem pozíciója változik, ami folyamatos mozgás érzett kelti)

Kulcskockák beállítása


@keyframes deklarációban meg kell adni az animáció nevét, valamint a módosítandó jellemző(k)nek minimum a kezdő és végértékét.

@keyframes animacio_neve { 
   from {tulajdonság:érték; tulajdonság:érték;}
     to {tulajdonság:érték; tulajdonság:érték;}
} 


A Safari és a Chrome böngészők igénylik a -webkit- előtaghasználatát.

@-webkit-keyframes animacio_neve { 
   from {tulajdonság:érték; tulajdonság:érték;}
     to {tulajdonság:érték; tulajdonság:érték;}
} 


1. Példa:


@keyframes animacio_neve { 
   from {width:200px; height:200px ; }
     to {width:400px; height:400px ; }
}
@-webkit-keyframes animacio_neve { 
   from {width:200px; height:200px ; }
     to {width:400px; height:400px ; }
}
 

Szóközzel elválasztva több tulajdonság is megadható.

Az első kulcskocka jelölésére használható a from kulcsszó helyett a 0% jelölés is. Az utolsó kulcskockának jelölésére ekkor a 100% szolgál.

Megadhatók közbenső állapotok is pl. az animáció időtartamának felét 50%-al jelöljük.

A fenti kód ezek alapján tovább finomítható:

2. Példa:


@keyframes animacio_neve { 
     0% {width:200px; height:200px;}
    20% {width:400px; height:400px;}
    40% {width:400px; height:400px;}
...
   100% {width:400px; height:400px;}
}
@-webkit-keyframes animacio_neve { 
     0% {width:200px; height:200px;}
    20% {width:400px; height:400px;}
    40% {width:400px; height:400px;}
...
   100% {width:400px; height:400px;}
}