cachaito
1/22/2014 - 9:54 PM

Animacja w css

Pozostawienie efektu po zakończonej animacji: animation-fill-mode: forwards; <- bez tego parametru animacja po odegraniu wróci do punktu wyjścia.

Podobny efekt uzyskamy, gdy zastosujemy parametry: animation-play-state: running; animation-play-state: paused; //na :hover

animacja CSS3.css
content_copyfile_download
@keyframes showBox {
  from: {opacity: 0;}
  to: {opacity: 1;}
}

div:hover {
  animation-name: showBox;
  animation-duration: 1s;
  animation-iteration-count: 10;
  animation-direction: normal; /* other: alternate */
  animation-timing-function: ease-in;
  animation-fill-mode: forwards; /* others: forwards, backwards, both, none*/
  animation-delay: 0s;
    
  /* animation: showBox 1s ease-in forwards;   <-- shorthand */
}