user193661 user193661 - 3 months ago 18
CSS Question

CSS rotation animation stop in place

I have the class .orbit that triggers the orbit animation. I remove the class to stop the rotation. That resets the element to its original position.

Is there a way to stop the rotation animation in its tracks, leaving the element where it is?

Currently getting the position and setting it to that, but it's not perfect.

https://jsfiddle.net/f4hnz2va/2/

#errordot{
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
background:red;
border-radius:50%;
font-size:40px;
}
#errorsun{
width:200px;
height:200px;
position:absolute;
top:50px;
left:50px;
}
.orbit {
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:orbit;
-webkit-animation-duration:5s;
}

@-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) }
}
@-moz-keyframes orbit {
from { -moz-transform:rotate(0deg) }
to { -moz-transform:rotate(360deg) }
}

Answer

What you need is not "stop" the orbit animation, but "pause" it, using CSS3 animation-play-state property. If you want to pause it forever and not resume again, a mark variable (such as "hasPaused") can be applied.

Sample jsfiddle can be found at: https://jsfiddle.net/cshao/1kb8cm7j/1/

Comments