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
 
menü MENÜ    

CSS3 stíluslapok készítése

CSS3 animáció


    Az animációk készítése a CSS3 izgalmas új lehetősége. Segítségükkel szkriptek felhasználása nélkül is mozgalmassá tehetjük weboldalainkat.                         

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.