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

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

你的动画声明有点乱。你只需要声明一个时间，一个缓动等等......例如你要声明5sand then 2s，然后是两个不同的缓动。

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