使用 css 动画延迟无缝地惊人动画答案

【问题标题】：staggering animations seamlessly with css animation-delay使用 css 动画延迟无缝地惊人动画
【发布时间】：2013-01-20 17:40:05
【问题描述】：

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

【问题讨论】：

绿色天空？你是基于海王星的，我明白了:) 看这里desandro.github.io/motion-emotion 的循环彩色动画，也许这会让你前进。 David DeSandro 解释了这一点，他将 Masonry、Isotope 和 Packery 带入了 jQuery 魔法的世界。
请收拾你的小提琴，没有人能这样帮助你。您可以在“Frameworks & Extensions”下的左框架中包含jQuery，无需直接粘贴到您的JS框架中。

标签： jquery css-animations

【解决方案1】：

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

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

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

【讨论】：