如何在 CSS 中减慢此旋转动画的最后几次迭代？

Question

@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;
}

Answer 1

这是我自己的 post，但我找到了解决方法。

我无需设置两个动画，只需将度数旋转设置为我希望它旋转的次数 - 即 - 360 * numOfSpins。

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

这里要吸取的教训是 rotate();可以采用大于 360 度的度数。

Answer 2

您可以使用 % 告诉它逐步制作动画。你甚至可以用它做很酷的花式动画。

@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>

Answer 3

您的代码存在一些问题：

尽量使用简洁的格式，这样可读性更好。
green 选择器似乎不正确，您可能想要一个像 .green.

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

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

如何在 CSS 中减慢此旋转动画的最后几次迭代？

How do I slow down the last few iterations of this rotation animation in CSS?

css

iteration

css-animations

duration

keyframe