Question

我最近意识到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时如何减少动画延迟时间？

Answer 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文件中删除时也消失了。）

希望这会有所帮助！

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

1 个答案: