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:

• Applying principles of traditional animation: valósághű effektusok alkalmazása
• Animate.css: kész animációk
• Animatable: animáció galéria és leírás

Eszközök:

• AnimatR (egyszerű, de ingyenes)
• Animatable (hamarosan)
• Sencha Animator (fizetős)
• Adobe Edge (fizetős)

 

Technorati-címkék: CSS3,CSS