animation-direction

animation-direction

CSS3 vlastnot animation-direction umožní pokročilý průběh animace.

Toto už bude trochu náročnější. Pro přehlednost jsem začátek animace nechal zčervenat a konec prvního cyklu je žlutý.

Příklad:

    
@keyframes pokrocili_prubeh {
  0%   {left: 0px; background: rgba(255, 0, 0, 1);}
  10%  {left: 0px; background: rgba(0, 128, 0, 0.5);}
  50%  {left: 200px;}
  90%  {left: 0px; background: rgba(0, 128, 0, 0.5);}
  100% {left: 0px; background: rgba(255, 255, 0, 1);}
}
div:hover {
  position: relative;
  animation-name: pokrocili_prubeh;
  animation-duration: 6s;
  animation-timing-function: ease-in;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

Začíná to být celkem šílený kód. Nebojte se! Na závěr si jej zjednodušíme.

Co se stalo?

1. Změnili jsme jméno animace (name) na pokrocili_prubeh.
2. Upravil se procentuální průběh animace (%), kde na začátku a na konci se element nepohybuje, ale jen mění barvu pozadí (background).
3. Prodloužili jsme čas trvání animace (duration) na 6s.
4. Nastavili jsme opakování animace iteration-count na hodnotu 2 (animace se přehraje 2x).
5. Přidali jsme vlastnost direction s hodnotou alternate.

Co provedla hodnota alternate?

Přehrála celou animaci v druhém cyklu (opakování [iteration-count]) odzadu.
Jednoduše se animace nejprve přehrála od 0 do 100% a po té od 100% do 0%.
Dá se také napsat, že každá sudá hodnota v intervalu vlastnosti iteration-count se přehraje od konce.

Poznámka:

Ve chvíli, kdy se animace přehrává v druhém cyklu od konce, dojde i k změně hodnoty ease-in na ease-out.