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ý.
@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.
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.
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.