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

CSS3 animáció

Programozott tananyag:


CSS Stílusbeállítások változtatása
A :hover vagy :active álosztály kijelölők felhasználásával módosíthatjuk a HTML elemek css beállításait abban az esetben, ha az egérkurzor a az elem fölé ér, vagy a felhasználó megnyomja a bal egérgombot, az egérkurzorral az elem felet

CSS3 animációs lehetőségei
A CSS3 lehetővé teszi, hogy a stílusbeállítások változtatása fokozatosan menjen végbe.

CSS3 átmenetek létrehozása
A transition-property jellemző segítségével adható meg, hogy mely CSS tulajdonság(ok) változásait kívánjuk folyamatos átmenetté alakítani.

CSS3 átmenetek változó sebességgel
A transition-timing-function tulajdonság segítségével adható meg, a CSS tulajdonság(ok) változásainak karakterisztikája.

CSS3 változás késleltetése
A transition-delay tulajdonság segítségével adható meg, a CSS tulajdonság(ok) változásainak késleltetése. Hány másodperccel kezdődjön később az átmenet.

CSS3 animációk kulcskockái
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.

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.

CSS3 animáció ismétlése
Az animation-iteration-count tulajdonság segítségével megadható, hogy hányszor ismétlődjön meg az animáció

CSS3 animáció késleltetése
Az animation-delay tulajdonság segítségével adott idővel késleltethető az animáció elindulása.

CSS3 animáció iránya
Az animation-direction tulajdonság segítségével megadható, hogy ismételt lejátszás esetén honnan kezdődjön és milyen irányba haladjon a lejátszás.

CSS3 animáció időkarakterisztikája
Az animation-timing-function tulajdonság segítségével adható meg, a CSS tulajdonság(ok) változásainak karakterisztikája.