我最近意识到animate.css提供的"翻转"过渡。我的网站非常注重用户界面，所以我想通过添加"翻转"转换来增加按钮点击的活力。这很好，只是在按钮点击后有大约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.chss文件的第1653行左右）：
.animated.flip {
-webkit-animation-delay: 1s; /* <-- my added delay */
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
我在Chrome和Safari上用MacBook Pro运行了这个。为了缩短样本，我只包含了-webkit预处理版本的延迟，但它也适用于-moz和-o（当我将其从animate.css文件中删除时，它也消失了）。
希望这能带来一些启示！