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ó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:
  1. Az átmenetek finomabban beállíthatók.

  2. 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.

  3. Beállítható az ismétlések száma, ami lehet akár végtelen is. (folyamatos ismétlés)

  4. 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