如何使循环动画等待使用css3 [英] how make a looped animation wait using css3

问题描述

我有一个css3动画，包含以下内容：

I have a css3 animation with the following:

@-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.5秒），动画开始动画结束，等待（约0.5秒） ...

It works flawlessly, well..., I want to make it wait between the loops:
animation-start, animation-finish, wait(about 0.5s), animation start, animation end, wait(about 0.5s)...

PS：我试过了 -webkit- -delay ，它不工作。

PS: I've tried -webkit-animation-delay, it does not work.

任何帮助？

推荐答案

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

Add 0.5 seconds to your animation duration, then create an extra frame in your keyframes that doesn't change the rotation amount;

@-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*/
...
}

：小连结。

这篇关于如何使循环动画等待使用css3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！