jquery - 关键帧不起作用

Question

大家好，我正在尝试为我的顶栏和一些框创建关键帧动画，但它不起作用，请帮助我解决我的 fiddle

 @-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

以下是您可以与关键帧一起使用的所有不同属性:

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;
}

Updated FIDDLE