如何使用 animate.css 减少动画延迟时间？答案

【问题标题】：How does one reduce the animation delay time with animate.css?如何使用 animate.css 减少动画延迟时间？
【发布时间】：2015-04-04 20:03:34
【问题描述】：

我最近注意到 animate.css 提供的“翻转”过渡。我的网站主要面向 UI，所以我想通过添加“翻转”过渡来为按钮点击添加一些生命。很好，只是在按钮单击后发生翻转之前有约 1 秒的延迟。

我在GitHub上扫描了css文件，看到的唯一与时间相关的代码是：

.animated {
    -webkit-animation-duration:1.0s;
    animation-duration:1.0s;
}

我将它们缩短到每个 0.5 秒，但这只会在动画发生后更快地发生翻转。

我尝试将以下与延迟相关的 css 添加到 .animated.flip 按钮

.animated.flip {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

但仍然没有变化。

我还在 button.animated.flip 中添加了相同的 css 规则，但同样没有效果。

在使用 animate.css 时如何减少动画延迟时间？

【问题讨论】：

请提供一个sn-p，或至少一个链接。
你在什么浏览器上测试？我问是因为看起来动画的 CSS 文件中提供的可能供应商前缀列表可能不完整。例如，MDN 的页面似乎表明需要 -moz- 作为动画持续时间的前缀：developer.mozilla.org/en-US/docs/Web/CSS/animation
@Jeff Mahoney，我在 FF/Chrome/IE/Opera 上测试了所有最新版本

标签： css css-animations animate.css

【解决方案1】：

嗯……嗯，我下载了 animate.css 和 jquery，在使用翻转过渡时没有遇到任何点击按钮延迟。

我在创建的示例页面中这样称呼它：

<body>
  <button id="mybutton" onclick="flipit()">Flip It</button>
</body>
<script>
  function flipit(){
    $('#mybutton').addClass('animated flip');
  }
</script>

事实上，直到我将一个放入 animate.css 文件中，我才能看到任何延迟，就像这样（在 animate.css 文件的第 1653 行左右）：

.animated.flip {
  -webkit-animation-delay: 1s;  /* <-- my added delay */
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-animation-name: flip;
          animation-name: flip;
}

我在 MacBook Pro 上的 Chrome 和 Safari 上运行了这个。我只包含了延迟的 -webkit-prefaced 版本以保持示例简短，但它也适用于 -moz 和 -o（当我将它从 animate.css 文件中剥离时也消失了）。

希望这能有所启发！

【讨论】：