0

我正在处理 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/

4

1 回答 1

0

一个给定的元素只能有一个属性值。

当您设置属性“动画”的值时，您会覆盖该属性的任何值。新动画值有延迟这一事实并不会改变这一事实。

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

于 2013-07-21T15:22:56.850 回答