CSS 关键帧问题

Question

我创建了一个简单的 CSS 动画。在 fiddle 中，我相信所有属性都是正确的，但没有动画发生。请帮助我了解我做错了什么。我附上了一些示例代码和下面的 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;
}

这里是fiddle。 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 will aplly the translation to the current position of your elements, without need to fix the values in keyframes.

接下来是兼容性，检查这个 W3 table 例如http://www.w3schools.com/css/css3_2dtransforms.asp

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

CSS 关键帧问题

CSS Keyframe Issue

css

animation

keyframe

css-transitions