如何在 CSS 中减慢这个旋转动画的最后几次迭代？答案

【问题标题】：How do I slow down the last few iterations of this rotation animation in CSS?如何在 CSS 中减慢这个旋转动画的最后几次迭代？
【发布时间】：2015-10-05 15:20:20
【问题描述】：

@keyframes plusRotate

{

from {transform: rotate(0deg);}

to {transform: rotate(360deg);}

}

green
{

color: #00933B;
animation-name: p1Eat, p1FadeInC, plusRotate;
animation-delay: 10.9s, 15.3s, 21s;
animation-duration: .1s, .7s, .3s;
animation-fill-mode: forwards;
animation-timing-function: linear, linear, linear;
animation-iteration-count: 1, 1, 16;
}

我想让它在“plusRotate”的最后一次迭代中，旋转变慢。我尝试添加一个单独的动画，其中有 1 次迭代，持续时间更长，但它根本不旋转！基本上我认为它会以某种方式中断。

我的其余代码工作正常，唯一的问题是我希望“+”（字符加号）旋转的部分。现在，它们旋转得很好。唯一的问题是它们不会减速到停止，因为它们被设置为

animation-timing-function: linear

我可以将动画时间设置为任何缓动函数，但它会在每次迭代期间缓动。我希望它持续旋转，并且只在最后一次旋转时放松。知道怎么做吗？

我已经尝试过这样做，但是优点根本没有旋转：

@keyframes plusRotate

{

from {transform: rotate(0deg);}

to {transform: rotate(360deg);}

}

@keyframes plusRotateEnd

{

from {transform: rotate(0deg);}

to {transform: rotate(360deg);}

}



green
{

color: #00933B;
animation-name: p1Eat, p1FadeInC, plusRotate, plusRotateEnd;
animation-delay: 10.9s, 15.3s, 21s, 25.8s;
animation-duration: .1s, .7s, .3s, .5s;
animation-fill-mode: forwards;
animation-timing-function: linear, linear, linear, ease-out;
animation-iteration-count: 1, 1, 15, 1;
}

【问题讨论】：

标签： css iteration css-animations duration keyframe

【解决方案1】：

您可以使用 % 告诉它分步执行动画。你甚至可以用它做很酷的花哨动画。

@keyframes k1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes k2 {
    0% {
        transform: rotate(0deg);
    }
    90% {
        transform: rotate(350deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.green {
    width: 50px;
    height: 50px;
    color: #00933B;
    animation-name: k1;
    animation-duration: 10s;
    animation-fill-mode: forwards;
}

.blue {
    width: 50px;
    height: 50px;
    color: #00933B;
    animation-name: k2;
    animation-duration: 10s;
    animation-fill-mode: forwards;
}

<div class="green">GREEN</div>
<div class="blue">BLUE</div>

【讨论】：

【解决方案2】：

这是我自己的帖子，但我想出了一个解决方法。

我所要做的只是将度数旋转设置为我希望它旋转的次数，而不是两个动画 - 即 - 360 * numOfSpins。

然后我将迭代计数设置为 1 并使用缓出。

这里要学习的是 rotate();可以采用大于 360 度的度数。

【讨论】：

【解决方案3】：

您的代码存在一些问题：

尝试使用干净的格式，这样可读性会更好。
green 选择器似乎不正确，您可能想要像 .green 这样的类选择器。

您的动画看起来是正确的，但有点复杂。我将其简化为一个更简单的示例，并且我认为它可以按预期工作：Here's the JSFiddle。

对于未来的问题：提供您的问题的最小工作示例供其他人重现总是很棒的。

【讨论】：