如何在css动画循环之间添加延迟

Question

我<div>使用css动画在360度旋转圆形无限远.每次旋转后,我想在下一次旋转前停止或延迟5秒.我怎样才能实现它？

这是一个实例

代码如下.

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>

Answer 1

你可以做这样的事情.

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

并改变旋转的持续时间

-webkit-animation-duration: 6s;

所以你正在做的是将动画设置为6,但是将旋转移动得更快(20%对于5的等待是不正确的,但你可以解决它).因此旋转发生,然后在剩余的时间内处于360度.

在这里演示