CSS3 animációs lehetőségei

Átmenetek

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

Korábban Flash animációk vagy JavaScript felhasználásával megvalósított hatásokat érhetünk el a Transitions tulajdonság segítségével.

Lehetőséget ad átmenetek készítésére, ahol egy elem kezdeti CSS beállításai fokozatosan változnak az új értékekre.

Az átmenet indulhat az oldal megjelenítését követően, vagy egy-egy esemény bekövetkezésekor.

Például a :hover vagy :active álosztály kijelölők felhasználásával.

Animációk

Az animációk megvalósítása a CSS3-ban sok szempontból hasonlít az átmenetekhez.

Amivel az animáció többet tud:

Az átmenetek finomabban beállíthatók.
A változtatni kívánt jellemzőkhöz kiinduló- és végértéket sőt közbenső értékeket is rendelhetünk a @keyframes deklarációval.
Beállítható az ismétlések száma, ami lehet akár végtelen is. (folyamatos ismétlés)
Az ismétléseknél megadható a lejátszás iránya. (mindig előröl kezdi, vagy oda-vissza)

Példa:

Forráskód


<style>
  #img2 { width:150px; height:80px;    }  
  #img2:hover  { width: 380px; height: 200px; 
                            transform: rotate(360deg);
                            -ms-transform: rotate(360deg); /* IE 9 */
                            -webkit-transform: rotate(360deg); /* Safari és Chrome */
  }
  #img2 {  transform: rotate(0deg);
                -ms-transform: rotate(0deg); /* IE 9 */
                -webkit-transform: rotate(0deg); /* Safari and Chrome */}
  #img2 {  transition:width 2s, height 2s, transform 2s;
                 -webkit-transition:width 2s, height 2s, 
                 -webkit-transform 2s;}
</style>     
...
<body>      
  Ha a szövegkurzor...     
  <div class="div_1">  
  <img src="Modern_halo_n.jpg" id="img2" alt="Minta kép" >
  </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ő: css_valtozas_2.html