Question

这很奇怪。好像我的所有语法都正确。在任何浏览器上仍未按预期工作？有什么帮助吗？

顺便说一下：我知道-moz，-webkit，-o前缀的东西。我也试过那些。它只是不起作用

我想要一个缓慢的反弹效果。这是我的完整jsFiddle

div {
    width:24px;
    height:24px;
    position:relative;
    left:0px;
    top:0px;
    animation:glide 5s linear 2s ease-in-out alternate;
}

@keyframes glide {
    from {left:0px; top:0px;}
    to {left:0px; top:20px;}
}

Answer 1

div {
    width:24px;
    height:24px;
    position:relative;
    display: inline-block;
    -webkit-animation:glide 5s infinite;
}
@-webkit-keyframes glide {
    from {left:0px; top:0px;}
    to {left:0px; top:120px;}
}

效果很好。

Answer 2

你的动画声明有点乱。你必须只声明一个时间，一个缓和等等...例如你宣布5s然后2s，然后是两个不同的缓和。

这是一个工作小提琴（在Chrome / Safari中查看）：http://jsfiddle.net/gleezer/RaXgq/10/

css3关键帧动画因未知原因无法正常工作

2 个答案: