Question

我正在研究一个CSS动画，当我尝试添加一个事件来向页面添加一些动态动画时，我遇到了一个问题。

为简单起见，这里是“天空”div的循环动画：

.sky {
width:100%;
height: 100%;
position: absolute;
z-index: 1;
-webkit-animation: animation-sky 30s linear infinite;
}

@-webkit-keyframes animation-sky{
0%, 100% {background-color: rgb(53, 110, 231);}
16% {background-color: skyblue;}
21% {background-color: orange;}
31% {background-color: rgb(19, 2, 61);}
77% {background-color: rgb(19, 2, 61);}
82% {background-color: orange;}
92% {background-color: skyblue;}
}

如您所见，它在颜色之间循环，对应于一天中的时间。

然后，使用绑定到按钮的jQuery事件侦听器，我向主体添加“动画”类以循环到新动画：

    .animating .sky {
    -webkit-animation: scene2-sky 38s linear 1;
    -webkit-animation-delay: 22s;
}

@-webkit-keyframes scene2-sky{
        0% {background-color: rgb(19, 2, 61);}
        100% {background-color: rgb(19, 2, 61);}

}

我为动画添加了延迟，因为在关键帧中显示背景颜色之前我还有其他需要完成的部分。

我的问题是，不是延迟动画（就像我给它的22秒），它只是将背景颜色变为白色，直到22秒为止。

有没有办法让它继续上一个动画，直到动画延迟将“动画”排队开始排队？

以下是jsfiddle的链接以供澄清：http://jsfiddle.net/benjtinsley/UDzh7/

Answer 1

给定元素只能包含属性值。

当您为属性“animation”设置值时，您将覆盖该属性所具有的任何值。新动画值有延迟的事实并没有改变这一事实。

要完成你想要的，只需在jQuery函数中设置延迟，将新类设置为元素

令人惊讶的动画与css动画延迟无缝

1 个答案: