html - 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;
}

这是一个Fiddle使用相同的代码。

对我来说，文本在 Chrome 38 中没有移动，但它在 Firefox 30 和 IE 11 上运行良好。

我尝试使用 @-webkit-keyframes，但文本在 Chrome 中也没有移动。

Answer 1

您需要在样式属性和关键帧函数上都使用供应商前缀

Demo Fiddle

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