如何使用 css3 使循环动画等待答案

【问题标题】：how make a looped animation wait using css3如何使用 css3 使循环动画等待
【发布时间】：2014-05-01 19:19:50
【问题描述】：

我有一个带有以下内容的 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;
}

它完美无缺，嗯...，我想让它在循环之间等待：
animation-start，animation-finish，wait(about 0.5s)，动画开始，动画结束，等待（约0.5s）...

PS：我试过-webkit-animation-delay，还是不行。

有什么帮助吗？

【问题讨论】：

标签： css css-animations

【解决方案1】：

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

@-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.

【讨论】：

Abody97 所做的一点“解决方法”：webkit animation fiddle
漂亮的解决方案，为什么我没有立即想到这个？

【解决方案2】：

您可以使用过渡。例如：

transition: all 0.6s ease-in-out;

在哪里transition-delay:0.6s;

【讨论】：

【解决方案3】：

通过javascript在指定时间内禁用元素上的css类可能会解决您的问题。

function delayAnimation () {
    var animatedEl = document.getElementById('whatever');
    animatedEl.className = '';
    setTimeout(function () {
        animatedEl.className = 'animated'
        setTimeout(delayAnimation, 2400);// i see 2.4s is your animation duration
    }, 500)// wait 0.5s
}

希望这会有所帮助。

编辑：我更新了这个答案来修复代码。您可以在 jsfiddle 上看到一个完整的示例。感谢@Fabrice 指出代码不起作用。

【讨论】：

不客气。当我看到@Abody97 的答案时，我个人也更喜欢它:)