Kezdőlap > Webfejlesztés > CSS Animations

CSS Animations

Egy korábbi cikkben írtam a CSS Transitionsről, amellyel JavaScript nélkül, pusztán CSS segítségével határozhatjuk meg, hogy egy CSS tulajdonság hogyan változzon X értékről Y értékre. A CSS Transitions használata viszonylag egyszerű, szinte magától működik, cserébe viszont korlátozottak a lehetőségei. Ezen segít a CSS Animations szabvány, ami az alábbi többlet lehetőségeket adja:

  • animáció ismétlése (animation-iteration-count tulajdonság)
  • animáció irányának meghatározása (előre, visszafelé, oda-vissza váltakozva) (animation-direction)
  • animáció részállapotainak meghatározása (keyframes) (@keyframes)
  • animáció megállítása és elindítása (animation-play-state)
  • CSS tulajdonság értékének meghatározása az animáció előtti és utáni időszakra (animation-fill-mode)

Szintén eltérés, hogy mikor indul az animáció. CSS Transitions esetén az animációt az váltja ki, hogy egy CSS tulajdonság értéke megváltozik (pl. :hover miatt). Ezzel szemben CSS Animations esetén az animáció akkor indul, amikor az animációt leíró stílust hozzárendeljük az adott DOM elemhez (tehát vagy az oldal betöltésekor, vagy az animation-name CSS tulajdonság beállításakor). Itt tehát explicit animációról van szó, ezért is hívják defined animation-nek.

A legszembetűnőbb eltérés, hogy egy (kissé szokatlan) @keyframes kulcsszó után kell megadnunk az animáció egyes fázisait:

@keyframes myAnimationName {
  from {
    left: 0px;
    top: 0px;
  }

  to {
    left: 100px;
    top: 100px;
  }
}

Itt a from és a to helyett írhatunk 0%-ot és 100%-ot, sőt megadhatunk köztes fázisokat is:

@keyframes myAnimationName {
  0% {
    left: 0px;
    top: 0px;
  }

  20% {
    left: 40px;
    top: 40px;
  }

  80% {
    left: 60px;
    top: 60px;
  }

  100% {
    left: 100px;
    top: 100px;
  }
}

Az alábbi animáció például egy 200×200 pixeles négyzet mentén mozgatja a DOM elemet Chrome-ban és Safariban, miközben a háttérszínét is változtatja:

@-webkit-keyframes myAnim
{
  0%   { background:red;    left:0px;   top:0px; }
  25%  { background:yellow; left:200px; top:0px; }
  50%  { background:blue;   left:200px; top:200px; }
  75%  { background:green;  left:0px;   top:200px; }
  100% { background:red;    left:0px;   top:0px; }
}

Az egyes fázisoknál megadhatjuk az átmenet módját is az animation-timing-function CSS tulajdonság használatával.

A @keyframes kulcsszó után az animáció általunk választott neve áll, amire akkor kell hivatkoznunk, amikor hozzárendeljük egy vagy több (újrafelhasználás!) DOM elemhez. Itt kell beállítanunk az animáció többi tulajdonságát is:

div {
  animation-name: myAnimationName;
  animation-duration: 5s;
  animation-timing-function: ease;  
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

Szerencsére itt is van rövidítési lehetőségünk: az animation tulajdonsággal egyetlen sorba sűríthetjük mindezt:

animation: myAnimationName 5s ease 2s infinite alternate both;

Érdekes, hogy a szabvány szerint az animation tulajdonságban nem tudjuk megadni az animation-play-state értékét, ami lehet running vagy paused, azaz ezzel tudjuk CSS szinten elindítani vagy leállítani az animációt:

div {
  animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

A Transitionshöz hasonlóan itt is fontos megadnunk az időtartamot (duration), mert az alapérték itt is nulla, azaz nincs animáció.

A CSS Animations szabvány a W3C oldala szerint jelenleg (2012. június 28. óta) Editor’s Draft állapotban van, de mivel a modern böngészők már támogatják, megpróbálkozhatunk a használatával:

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

Összetettebb példák:

Eszközök:

 

Technorati-címkék: ,
Kategóriák:Webfejlesztés Címke:

MINDEN VÉLEMÉNY SZÁMÍT!

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

You are commenting using your WordPress.com account. Kilépés / Módosítás )

Twitter kép

You are commenting using your Twitter account. Kilépés / Módosítás )

Facebook kép

You are commenting using your Facebook account. Kilépés / Módosítás )

Google+ kép

You are commenting using your Google+ account. Kilépés / Módosítás )

Kapcsolódás: %s

Követés

Értesítést küldünk minden új bejegyzésről a megadott e-mail címre.

Csatlakozz a 76 követőhöz

%d blogger ezt szereti: