CSS動畫無法啓動

我設置了一個簡單的css動畫，以增加一個圓，但不啓動。哪裏不對？CSS動畫無法啓動

HTML

<ul><li></li></ul>

CSS

li { 
    position: absolute; 
    height: 70px; 
    width: 70px; 
    display:block; 
    border: 5px solid red; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    animation: growUp 1s; 
    animation-iteration-count: infinite; 

} 

@keyframes growUp { 
    0% { -moz-transform: scale(0); } 
    100% { -moz-transform: scale(1); } 
}

來源

2015-10-16 vuvu

我可以看到它的工作一旦所有的前綴適當添加（你有'-moz-'在標準範圍內'@ keyframes'這可能會導致問題）。你使用的瀏覽器是什麼，它的版本是什麼？ – Harry

@Harry thx，但它仍然不起作用 – vuvu

您使用了錯誤的前綴爲您的關鍵幀。

嘗試改變：

@keyframes growUp { 
    0% { -moz-transform: scale(0); } 
    100% { -moz-transform: scale(1); } 
}

到

@keyframes growUp { 
    0% { transform: scale(0); } 
    100% { transform: scale(1); } 
}

這應該解決您的動畫。

閱讀在這裏看到你應該用什麼前綴和其中：http://shouldiprefix.com/

更新小提琴以及：http://jsfiddle.net/6c79780r/4/

爲了完整 - 網頁「我應該前綴」規定，你應該前綴，像這樣的動畫：你可以用這種方式爲所有前綴設置它。

@-webkit-keyframes MyAnimation { 
    0% { left: 0; } 
    50% { left: 200px; } 
    100% { left: 20px; } 
} 
@keyframes MyAnimation { 
    0% { left: 0; } 
    50% { left: 200px; } 
    100% { left: 20px; } 
} 

.example.is-animating { 
    ... 
    -webkit-animation: MyAnimation 2s; /* Chr, Saf */ 
      animation: MyAnimation 2s; /* IE >9, Fx >15, Op >12.0 */ 
}

的CSS3動畫屬性的完整和全面的故障可以在這裏找到：http://css3files.com/animation/

來源

2015-10-16 14:53:47 Adjit

CSS動畫無法啓動

回答

相關問題