css3具有不同持续时间的多个动画

Question

是否可以使用CSS3动画给元素多个不同持续时间的动画？

我最终想要的是完成后有球继续旋转。我知道我可以通过给予多个课程来做到这一点。但我想避免这种情况，以防止乱七八糟的类。

（小提琴可能无法在其他浏览器Chrome以外的工作，我只是迅速砍死一起）

的我有什么目前http://jsfiddle.net/cchsh6om/2/

这里的CSS小提琴例子

div { 
    margin: 20px; 
    width: 100px; 
    height: 100px; 
    border-radius: 46px; 
    position: relative; 
    background: #ddd; 
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 1000ms; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: ease-out; 
    -moz-animation-name: spin; 
    -moz-animation-duration: 1000ms; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-timing-function: ease-out; 
    -ms-animation-name: spin; 
    -ms-animation-duration: 4000ms; 
    -ms-animation-iteration-count: 1; 
    -ms-animation-timing-function: ease-out; 

    animation-name: spin; 
    animation-duration: 1000ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 
span{ 
    position: absolute; 
    line-height: 100px; 
    left:48%; 
} 
@-ms-keyframes spin { 
    from { 
     opacity: 0; 
     margin-left: 200px; 
     -ms-transform: rotate(0deg); } 
    to { 
     opacity: 1; 
     margin-left: 20px; 
     -ms-transform: rotate(-360deg); } 
} 
@-moz-keyframes spin { 
    from { 
     opacity: 0; 
     margin-left: 200px; 
     -moz-transform: rotate(0deg); 
    } 
    to { 
     opacity: 1; 
     margin-left: 20px; -moz-transform: rotate(-360deg); } 
} 
@-webkit-keyframes spin { 
    from { 
     opacity: 0; 
     margin-left: 200px; 
     -webkit-transform: rotate(0deg); } 
    to { 
     opacity: 1; 
     margin-left: 20px; 
     -webkit-transform: rotate(-360deg); } 
} 
@keyframes spin { 
    from { 
     opacity: 0; 
     margin-left: 200px; 
     transform:rotate(0deg); 
    } 
    to { 
     opacity: 1; 
     margin-left: 20px; 
     transform:rotate(-360deg); 
    } 
} 

而且HTML

<div><span>=</span></div> 

Answer 1

是的，它可能是b你的语法错了。首先，使用短符号animation: horizontal linear 8s infinite（更多信息请阅读acticle）。然后，你就可以申请用逗号在相同的元素分隔的多个动画：

animation: horizontal linear 8s infinite, 
       vertical ease-in-out 1.3s infinite alternate, 
       blink linear .7s infinite alternate, 
       rotation linear .4s infinite; 

，并定义的关键帧他们每个人：

@keyframes horizontal { 
    from {left: 0;} 
    to {left: 100%;} 
} 
@keyframes vertical { 
    from {top: 0;} 
    to {top: 200px;} 
} 

最后，你可以省略对-moz和-ms前缀。 -webkit-animation和animation适用于所有现代浏览器，包括手机。

看到我的多个动画样本CodePen，我已经在很多平台上测试过它。