如果有动画延迟属性，CSS 动画不会在 Chrome 中启动答案

【问题标题】：CSS animation doesn't start in Chrome if there is an animation-delay property如果有动画延迟属性，CSS 动画不会在 Chrome 中启动
【发布时间】：2014-03-03 10:33:29
【问题描述】：

我正在尝试使用关键帧为一个元素使用两个连续的动画，但如果我设置了动画延迟属性，则第二个动画不会在 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;
}

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

动画延迟属性被注释。

【问题讨论】：

感谢@ZachSaucier 我刚刚测试了您的解决方案并且它有效，但我结束了使用 setTimeout...

标签： css google-chrome css-animations

【解决方案1】：

原来this is a bug 报告了将近一年前，令我震惊的是它还没有得到修复。

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

animation-delay: 0s, .5s;

他们还讨论了在此期间（在不同的元素上）运行第二个动画的可能性，这允许第二个动画运行。 I tested it 并确认它也解决了该问题，从而使您的animation-delay 大于.5s。以下是我应用于容器的动画（什么都不做），.wrapper

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

很好地抓住了这个错误！

【讨论】：