我最近开始意识到 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 时的动画延迟时间？
最佳答案
嗯...好吧，我下载了 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 文件中剥离时它也消失了)。
希望这能说明一些问题!
关于css - 如何使用 animate.css 减少动画延迟时间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28335962/