animation-play-state

animation-play-state

CSS3 vlastnot animation-play-state pozastaví, nebo spustí animaci.

Příklad:

    
@keyframes jmeno_animace {
  0%   {left: 0px;}
  50%  {left: 200px;}
  100% {left: 0px;}
}
div {
  position: relative;
  animation-name: jmeno_animace;
  animation-duration: 2s;
  animation-iteration-count: infinite;    
}
div:hover {
  animation-play-state: paused;
}

Možná je vhodnější použít JavaScript, ale pokud chcete čistě jen CSS, tak moje řešení je hover.

Opak vlastnosti paused je running.