如何在css动画周期之间添加延迟[重复]答案

【问题标题】：How to add a delay between cycles of css animation [duplicate]如何在css动画周期之间添加延迟[重复]
【发布时间】：2014-10-07 18:09:17
【问题描述】：

我正在使用 css 动画将圆形 <div> 无限旋转 360 度。每次旋转后，我希望在下一次旋转之前暂停或延迟 5 秒。我怎样才能实现它？

Here's a live example

代码如下。

CSS

.circle{
    position: absolute;
    top: 4;
    right: 4;
    height: 21px;
    width: 21px;
    border-radius: 50%;
    background: #00B5F9;
    color: white;
    font-family: varela round;
    font-size: 11;
    font-weight: 500;
    border: 1px solid white;
    -webkit-animation-name: lol;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function:  ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 1s
}
@-webkit-keyframes lol {  
    0% { -webkit-transform:rotate(0deg) }

    100% { -webkit-transform:rotate(360deg) }

}

HTML

<div class="circle">56</div>

【问题讨论】：

这个 QA 比引用的要干净得多。

标签： html css

【解决方案1】：

你可以这样做。

0% { -webkit-transform:rotate(0deg) }
20% { -webkit-transform:rotate(360deg) }
100% { -webkit-transform:rotate(360deg) }

并更改旋转的持续时间

-webkit-animation-duration: 6s;

所以你正在做的是将动画设置为 6，但移动旋转更快（20% 对于 5 的等待是不正确的，但你可以解决）。所以旋转发生了，然后在剩下的时间里它处于 360 度。

Demo Here

【讨论】：

哇，太棒了。 +1
只是出于好奇，是否有任何特定的 css 属性呢？喜欢-webkit-animation-delay？
@AdityaPonkshe 据我所知没有。我也想要一个属性，但还没有。
transistion-delay: 2s; ?
@Benjamin 第一次延迟动画，仅此而已。所以就在动画开始的时候。