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
@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 */
}