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

您需要在style属性和keyframes函数上都使用供应商前缀

演示小提琴

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