css - 如何减慢 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

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

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