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，我已經在很多平臺上測試過它。