CSS3 旋转动画 -- 开始旋转，然后在帧上停止

Question

我试图创建一个将开始旋转的函数 - 然后是图像替换，然后是停止旋转。

当我删除旋转类时 - 它颠簸 - 我如何在框架上停止旋转。

setTimeout(function() {
$('.image').addClass("spinner");
}, 400);
setTimeout(function() {
$('.image').removeClass("spinner");
}, 1500);

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
}
.spinner {
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

基本代码 http://jsfiddle.net/m6z4jgdq/

当前示例 http://jsfiddle.net/m6z4jgdq/2/

Answer 1

您可以通过删除 CSS 动画中的infinite迭代计数使其仅运行一次来使图像仅旋转一次：

.spinner {
-webkit-animation: spin 1s linear;
-moz-animation: spin 1s linear;
animation: spin 1s linear;
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards; 
animation-delay: 400ms; /* start animation after 400ms */
}

这样，就无需手动停止它旋转，因为它会在旋转 360° 后自然停止(去除出现的"颠簸"(。如果您想在400ms后启动动画而不是使用 JS 和setTimeout，也可以添加animation-delay：

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
}
.spinner {
-webkit-animation: spin 1s linear;
-moz-animation: spin 1s linear;
animation: spin 1s linear;
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
animation-delay: 400ms;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

您可以通过在animateCSS 样式中指定迭代计数(即：动画重复的次数(来指定迭代计数。例如，如果你想让它旋转三次，你可以这样做：

animation: spin 1s linear 3;

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
}
.spinner {
-webkit-animation: spin 1s linear 3;
-moz-animation: spin 1s linear 3;
animation: spin 1s linear 3;
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
animation-delay: 400ms;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

如果您希望每次旋转之间有延迟，则需要指定不执行任何操作的关键帧，并延长动画时间，使其也考虑延迟：

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
}
.spinner {
-webkit-animation: spin 2s linear 3;
-moz-animation: spin 2s linear 3;
animation: spin 2s linear 3;
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
animation-delay: 400ms;
}
@-moz-keyframes spin {
50%, 100% { /* 50% of 2secs = 1sec, so 1 sec delay between rot */
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
50%, 100% { /* 50% of 2secs = 1sec, so 1 sec delay between rot */
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
50%, 100% { /* 50% of 2secs = 1sec, so 1 sec delay between rot */
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">