关键帧不起作用

Question

大家好，我正试图为我的顶部栏和一些框创建关键帧动画，但它不起作用，请帮我完成我的小提琴

 @-webkit-keyframes flow{
    0% {
        top:-100px;
    }
    100% {
        top: 75px;
    }
}
@keyframes flow{
    0% {
        top:-100px;
    }
    100% {
        top: 75px;
    }
}
.animate-flow{
    -webkit-animation-name: flow;
            animation-name: flow;
}

我在使用jquery 加载页面时添加了这个类

$('.top-bar').addClass('animate-flow');

它不工作

Answer 1

以下是可以与keyframes:一起使用的所有不同属性

animation-name:;
 animation-duration:;
 animation-iteration-count:;
 animation-direction:;
 animation-timing-function:;
 animation-fill-mode:;
 animation-delay:;

更改代码

.animate-flow{
-webkit-animation-name: flow;
        animation-name: flow;

}

例如：

.animate-flow{
    -webkit-animation: flow 3s ease-in-out;
            animation: flow 3s ease-in-out;
}

更新的FIDDLE

Answer 2

.animate-flow{
animation: flow 5s;
-webkit-animation: flow 5s; /* Safari and Chrome */
}

更新的fiddle

Answer 3

您可以添加持续时间来动画流和反弹类，就像这个jsfiddle 中显示的那样

 -webkit-animation-duration: 1s;
  animation-duration: 1s;

Answer 4

我更新了你的小提琴

您错过的是，您需要给出动画的持续时间，而不仅仅是调用动画名称。

所以你小提琴里的一个类现在看起来是这样的：

.animate-flow{
    animation:3s flow;
    -webkit-animation:3s flow;    
}

也不要忘记-moz-、-ms-、-o。