动画迭代延迟 CSS3答案

【问题标题】：Animation iteration delay CSS3动画迭代延迟 CSS3
【发布时间】：2014-02-06 19:54:45
【问题描述】：

有没有办法在每次迭代之间添加延迟？

EX：我想添加一个 2s 的第一个延迟和一个 10s 的交互延迟

这里有一些代码：

代码：

/* PROCESSAR AQUI! */
/*...*/


/* KEYFRAMES */

@-webkit-keyframes transitdescription {
    15%     { margin-left: 45px;}
}

@-webkit-keyframes transitimage {
    0%      { right: -100%;}
    10%     { right: -webkit-calc(93% - 350px);}
    25%    { right: -webkit-calc(90% - 350px);}
    90%    { right: -webkit-calc(90% - 350px);}
    100%    { right: -webkit-calc(200%);}
}

@-webkit-keyframes rotateimg {
    50%  {-webkit-transform: rotate(-10deg);}
}

@-webkit-keyframes pluswidth {
    50%  {  width: 450px;}
}

@-webkit-keyframes leaveimage {
    50%  {  width: 450px;}
}

谢谢。

【问题讨论】：

什么互动？我猜是迭代还是交互？
Iteration* 现在我正在使用一个javascript，每x秒删除和添加一个类
所以当页面加载时你想等待 2 秒然后动画，那么当动画完成后你想等待 10 秒然后动画？
这能回答你的问题吗？ CSS animation delay in repeating

标签： css animation

【解决方案1】：

没有这样的属性，虽然it has been suggested。

有一些解决方法：

@-webkit-keyframes transitimage {
    /* animation here */
    10%, 100% { /* wait for 10 seconds without doing anything */ }
}

这远非理想。
您可以查看此related question 以了解其他解决方法。

【讨论】：