I am trying to pause an animation made with css using the following code but it does not work. What mistakes are I making? How can I solve it?
.paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
#cube1{
-webkit-animation: slide 5s forwards 0s 3;
animation: mcube1 1s forwards 0s 1;
}
@-webkit-keyframes mcube1{
to{
-webkit-transform: translate(130.5px, -77px);
-ms-transform: translate(130.5px, -77px);
transform: translate(130.5px, -77px);
}
}
@keyframes mcube1{
to{
-webkit-transform: translate(130.5px, -77px);
-ms-transform: translate(130.5px, -77px);
transform: translate(130.5px, -77px);
}
}
<img id="cube1" class="position-absolute paused" src="images/intro/1.png">