CSS animations can be paused using animation-play-state: paused
Example
<div class="my-container">
<div class="my-box">Hover over me</div>
</div>
* {
box-sizing: border-box;
}
.my-container {
position: relative;
height: 300px;
border: 10px solid;
}
.my-box {
position: absolute;
padding: 10px;
border: 2px solid;
width: 100px;
height: 100px;
animation-name: diagonal;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* pause animation on hover */
.my-box:hover {
animation-play-state: paused;
background: grey;
cursor: pointer;
}
@keyframes diagonal {
from {
top: 0;
}
to {
top: calc(100% - 100px);
}
}
Result
Hover over me