@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
left: 244px;
top: 100px;
}
100% {
left: 488px;
top: 0;
}
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
.stage:active .ball {
animation-plate-state:paused;
}
.stage:hover .ball {
animation: slide 2s ease-in-out .5s infinite alternate;
}
.stage:active .ball {
animation-play-state: paused;
}