如果存在动画延迟属性，则 CSS 动画不会在 Chrome 中启动

Question

我正在尝试使用关键帧对元素使用两个连续的动画，但是如果我设置了动画延迟属性，则第二个动画不会在Chrome中启动，直到我进行一些交互，例如单击某处。该代码在 Firefox 中按预期工作。

这是一个错误还是我做错了什么？

@-webkit-keyframes to-up {
from {
-webkit-transform: rotate(45deg);
}
to {
-webkit-transform: rotate(0);
}
}
@-webkit-keyframes move {
from {
-webkit-transform: rotate(0);
}
to {
-webkit-transform: translateY(-1000px);
}
}
.animate {
-webkit-animation-name: to-up, move;
-webkit-animation-duration: .5s, 1s;
-webkit-animation-delay: 0, 1.4s;
-webkit-animation-timing-function: ease-in, cubic-bezier(0.6, -0.28, 0.735, 0.045);
-webkit-animation-fill-mode: forwards;
}

代码笔上的代码：http://codepen.io/kcmr/pen/Ibrnx

对动画延迟属性进行注释。

Answer 1

事实证明，这是近一年前报告的错误，令我惊讶的是它尚未修复。

为了解决这个问题，他们说要将秒的animation-delay更改为与第一秒的持续时间相同的长度。对你来说，这将是

animation-delay: 0s, .5s;

他们还讨论了在此期间运行第二个动画(在不同的元素上)的可能性，从而允许第二个动画运行。我对其进行了测试并确认它也解决了该问题，从而使您的animation-delay比.5s更大。以下是我应用于容器的动画(不执行任何操作)，.wrapper

@keyframes empty {from{display:block;}to{display:block;}}

很好地抓住了这个错误！