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

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

updated fiddle

Answer 2

以下是您可以使用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;
}

Updated FIDDLE

Answer 3

您可以为动画流和反弹类添加持续时间，例如此jsfiddle

所示的内容

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

Answer 4

我更新了您的fiddle

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

所以你小提琴中的一个课程现在看起来像这样：

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

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

关键帧不起作用

4 个答案: