Question

我使用css动画在360度旋转圆形<div>无穷大。每次旋转后，我想在下一次旋转前停止或延迟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度。

Demo Here

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

1 个答案: