WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.

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 érzetét 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;}
}