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

我想让它绕过＆＃34; plusRotate＆＃34;的最后一次迭代，旋转速度变慢。我尝试添加一个单独的动画，其中1次迭代的持续时间更长，但它根本没有旋转！基本上我认为它会以某种方式打破。

我的其余代码工作正常，唯一的问题是在我想要的部分＆＃34; +＆＃34; （字符加）旋转。现在，他们旋转很好。唯一的问题是他们不会因为设置为

而放慢速度

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

您可以使用％来告诉它分步进行动画制作。你甚至可以用它做很酷的动画。

private async Task HandleDownloadAsync(DownloadOperation downloadOperation)
{
   allDownloads.Add(downloadOperation);
   ResponseInformation response = downloadOperation.GetResponseInformation();
   if (response.StatusCode == 200)
    {
      responseList.Add(response);
    }
    if (responseList.Count() == allDownloads.Count())
      {
        var total = BYTES * 100 / TOTALBYTES;
        if (total == 100)
         {
             // do the success message here
         }
      }     
}

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

Answer 2

这是我自己的帖子，但我已经找到了解决方法。

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

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

这里要学习的教训是rotate（）;可以采用大于360度的度数。

Answer 3

您的代码存在一些问题：

尝试使用干净的格式，以便更好阅读。
green选择器似乎不对，你可能想要一个像.green这样的类选择器。

你的动画看似正确，但有点复杂。我把它简化为一个更简单的例子，它在我看来按预期工作：Here's the JSFiddle。

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

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

3 个答案: