css - 如何使用 css3 制作循环动画等待

Question

我有一个包含以下内容的 css3 动画:

@-webkit-keyframes rotate {
    from {
    -webkit-transform: rotate(0deg);
    }
    to { 
    -webkit-transform: rotate(360deg);
    }
}

.animated {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2.4s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: ease-in-out;
}

它完美地工作，好吧......，我想让它在循环之间等待:
动画开始，动画结束，等待(约0.5s)，动画开始，动画结束，等待(约0.5s) )...

PS:我试过-webkit-animation-delay，没用。

有什么帮助吗？

Answer 1

将 0.5 秒添加到您的动画持续时间，然后在您的关键帧中创建一个不会改变旋转量的额外帧；

@-webkit-keyframes rotate {
    0% {
    -webkit-transform: rotate(0deg);
    }
    83% { /*2.4 / 2.9 = 0.827*/
    -webkit-transform: rotate(360deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    }
}
.animated {
...
-webkit-animation-duration: 2.9s; /*note the increase*/
...
}

小演示:little link .