动画迭代延迟CSS3

有没有在每次迭代之间添加延迟的方法？动画迭代延迟CSS3

EX：我要添加2秒的第一延迟和10秒

这里的互为作用的延迟是一些代码：

代码：

/* 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;} 
}

感谢。

来源

2013-03-23 Maurício Giordano

什么是互动？我在猜测迭代或交互？ – 2013-03-23 16:05:43

迭代* 现在我正在使用一个JavaScript，每隔x秒删除并添加一个类 – 2013-03-23 16:07:22

因此，当页面加载时，您想等待2秒钟然后设置动画，然后当动画完成后，您要等待十秒钟，然后设置动画？ – 2013-03-25 08:57:59

有没有这样的财产，虽然it has been suggested。

有解决方法：

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

这是很不理想。
对于其他解决方法，您可以看到此related question。

来源

2014-02-06 11:37:03 Razor

动画迭代延迟CSS3

回答

相关问题