CSS Transitions

Klasszikus esetben, amikor egy CSS tulajdonság megváltozik, a böngésző azonnal érvényesíti a változtatást és frissíti a megjelenített oldalt. A CSS3 részeként megjelenő CSS Transitions segítségével ezeket a tulajdonság változásokat tudjuk finoman befolyásolni: meghatározhatjuk, hogy az átmenet mennyi idővel később, mennyi idő alatt és hogyan történjen meg. Mivel ezt JavaScript nélkül, pusztán CSS segítségével tehetjük meg, ezért ezeket az átmeneteket implicit transitions-nek is szokták nevezni.

A W3C oldalán a CSS Transitions szabvány jelenleg (2012. április 3. óta) Working Draft állapotban van, de mivel a böngészők újabb verziói speciális előtagokkal végülis már támogatják, ezért érdemes megismerkedni a lehetőségeivel.

Böngésző Támogató verzió Gyártó előtag
Chrome 4.0+ -webkit-
Firefox 4.0+ -moz-
Internet Explorer 10+ Előtag nélkül
Safari 3.1+ -webkit-
Opera 10.5+ -o-

Az első kérdés, amit tisztáznunk kell, hogy mikor érvényesül a megadott transition? Hát amikor a CSS tulajdonság megváltozik!

De hogyan változhat meg egy tulajdonság pusztán CSS használatával? Például :hover vagy :focus használatával!

Röviden tehát arról van szó, hogy CSS Transitions segítségével például egy div és div:hover szelektorban megadott érték között határozhatjuk meg az átmenet módját.

Az alábbi CSS tulajdonságok állnak rendelkezésünkre:

  • transition-property: melyik tulajdonságot akarjuk animálni
  • transition-duration: mennyi ideig tartson az animáció. Ezt mindenképp meg kell adni, mert alapértelmezés szerint az értéke nulla, azaz nincs animáció!
  • transition-delay: mennyivel később kezdődjön az animáció
  • transition-timing-function: milyen függvény szerint történjen az átmenet

Például rajzoljunk egy 100×100 pixeles piros négyzetet, ami 3 másodperc alatt kétszeres szélességűre nyúlik Chrome-ban 1 másodperccel azután, hogy fölé vittük az egeret:

<!DOCTYPE html>
<html>
<head>
  <style type="text/css"> 
    div
    {
      width: 100px;
      height: 100px;
      background:red;
      -webkit-transition-property: width;
      -webkit-transition-duration: 3s;
      -webkit-transition-delay: 1s;
      -webkit-transition-timing-function: ease;
    }

    div:hover
    {
      width: 200px;
    }
  </style>
</head>
<body>
  <div>Négyzet</div>
</body>
</html>

Szerencsére létezik egy transition tulajdonság is, amivel egyetlen sorba foghatjuk össze az összes beállítást:

-webkit-transition: width 3s ease 1s;

Persze ez cross-browser változatban így néz ki (szerencsére a szintakszis ugyanaz):

-webkit-transition: width 3s ease 1s;
   -moz-transition: width 3s ease 1s;
     -o-transition: width 3s ease 1s;
        transition: width 3s ease 1s;

Ha az összes tulajdonságot szeretnénk animálni, akkor a tulajdonság neve helyett all-t kell megadnunk:

transition: all 3s ease 1s;

Vesszővel elválasztva több tulajdonságra akár többféle átmenetet is megadhatunk:

transition: width 4s, background-color 2s;

Sőt, a késleltetés (ami alapértelmezés szerint nulla másodperc) segítségével akár egymás után is lejátszhatjuk az animációkat! Az alábbi kód például előbb 3 másodperc alatt megváltoztatja a szélességet, azután pedig 2 másodperc alatt a háttérszínt:

transition: width 3s, background-color 2s ease 3s;

Az átmenet “hogyanját” a transition-timing-function tulajdonság határozza meg, ami ease (alapértelmezett), linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(…) vagy cubic-bezier(…) értéket vehet fel. Ezzel azt tudjuk befolyásolni, hogy a megadott idő alatt a két érték közötti változás milyen tempóban történjen meg, azaz legyen-e benne gyorsulás, lassulás vagy ugrás. A w3schools egyik példájában ezek közül többet is kipróbálhatunk.

Fontos megjegyezni, hogy nem mindegyik CSS tulajdonság animálható. Az animálható CSS tulajdonságok listája megtalálható a specifikációban.

Összetettebb példák:

 

Technorati-címkék: ,
Advertisements

One thought on “CSS Transitions

  1. Visszajelzés: CSS Animations « Balássy György szakmai blogja

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s