Question

我有触发轨道动画的类.orbit。我删除了类来停止旋转。这会将元素重置为原始位置。

有没有办法在其轨道上停止旋转动画，将元素留在原处？

目前获得该职位并将其设置为该职位，但这并不完美。

#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 1

你需要的不是＆＃34;停止＆＃34;轨道动画，但是＆＃34;暂停＆＃34;它，使用CSS3 animation-play-state属性。如果你想永久地暂停它而不是再次恢复，可以应用标记变量（例如＆＃34; hasPaused＆＃34;）。

示例jsfiddle可以在以下位置找到： https://jsfiddle.net/cshao/1kb8cm7j/1/

CSS旋转动画停止到位

1 个答案: