animation-play-state
La propriété animation-play-state indique si l'animation est en cours d'exécution ou bien si elle est en pause. Elle accepte deux valeurs :running indique que l'animation est en cours d'exécution
paused indique que l'animation est en pose
Passez la souris sur l'animation pour la mettre en pause.
<style>
#bloc {
width: 400px;
height: 120px;
border: 1px solid black;
overflow: hidden;
}
#carre {
width: 120px;
height: 120px;
background-color: aquamarine;
animation-name: exemple;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
#bloc:hover #carre {
animation-play-state: paused;
}
@keyframes exemple {
from { margin-left: -120px; }
to { margin-left: 400px; }
}
</style>
<div id="bloc">
<div id="carre"></div>
</div>