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/

CSS关键帧问题

2 个答案: