CSS @keyframes 在 Chrome 中不起作用

Question

我正在試驗 CSS3 @keyframes 動畫，但我沒有設法讓它在 Chrome 中工作（目前我有 Chrome 38）

代碼非常簡單：

HTML

<div id="block">moving text</div>

CSS

@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

#block {
    position:absolute;
    animation: mymove 2s infinite;
}

這是一個具有相同代碼的小提琴。

對我來說，文本在 Chrome 38 中沒有移動，但在 Firefox 30 和 IE 11 上運行良好。

我嘗試使用@-webkit-keyframes但文本在 Chrome 中也沒有移動。

Answer 1

您需要在樣式屬性和關鍵幀函數上使用供應商前綴

演示小提琴

@-webkit-keyframes mymove /* <--- here */
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

#block {
    position:absolute;
    -webkit-animation: mymove 2s infinite;/* <--- and here */
}