CSS 关键帧问题

Question

我创建了一个简单的 CSS 动画。在小提琴中，我相信所有属性都是正确的，但没有动画发生。请帮助我理解我做错了什么。我附上了一些示例代码和下面的 jsfiddle。谢谢。

@-moz-keyframes til {
    0%   { margin-top: -200px; }
    20%  { margin-top: -198px; }
    35%  { margin-top: -196px; }
    50%  { margin-top: -194px; }
    75%  { margin-top: -196px; }
    80%  { margin-top: -198px; }
    100% { margin-top: -200px; }
}
@-o-keyframes til {
    0%   { margin-top: -200px; }
    20%  { margin-top: -198px; }
    35%  { margin-top: -196px; }
    50%  { margin-top: -194px; }
    75%  { margin-top: -196px; }
    80%  { margin-top: -198px; }
    100% { margin-top: -200px; }
}
@keyframes til {
    0%   { margin-top: -200px; }
    20%  { margin-top: -198px; }
    35%  { margin-top: -196px; }
    50%  { margin-top: -194px; }
    75%  { margin-top: -196px; }
    80%  { margin-top: -198px; }
    100% { margin-top: -200px; }
}
/*-------------------Animation Keyframes------------------------*/

.one {
    z-index: 5;
    -webkit-animation: til 2s ease-in infinite; /* Safari 4+ */
    -moz-animation: til 2s ease-in infinite; /* Fx 5+ */
    -o-animation: til 2s ease-in infinite; /* Opera 12+ */
    animation: til 2s ease-in infinite; /* IE 10+ */
    width: 100%;
    height: 300px;
    background: url(http://galnova.com/diabetescrush/img/mob/wave.png) no-repeat;        
    background-position: center;
    margin-top: -200px;
}

这是小提琴。 http://jsfiddle.net/galnova/pnk0j8gv/9/

Answer 1

您是在 Chrome 还是 Safari 中进行测试？您确实有 -webkit-animation 属性，但没有 -webkit-keyframes。一旦你添加了它，事情就会开始移动（可能不正确，但至少它们确实如此）。

Fiddle

Answer 2

首先要做的事情..

您似乎在低效使用key-fames 系统。 无需申请margin-top，而对于您的解决方案，-webkit-transform:translate(Xpx, Ypx); 就可以正常工作。

-webkit-transform:translate 将转换到元素的当前位置，而无需修复关键帧中的值。

接下来是兼容性，请查看此 W3 表，例如http://www.w3schools.com/css/css3_2dtransforms.asp

这是一个所有元素都在移动的工作示例（在 mozilla 上测试）： http://jsfiddle.net/urahara/pnk0j8gv/14/