html - html 中的 CSS 动画

Question

我有 html 动画，在页面加载时播放。

<div class="animated bounceInUp zoomin" style="text-align:center;">

<img src="butonwater.png" onclick="" width="200px" height="200px">
</div>
<script>

bounceInUp 是我的样式表中的 CSS 动画。如何从样式表 onclick 播放动画？

Answer 1

Working Plunker

有多种方法可以使用 onclick 重新启动动画。 Chris Coyier 有一个 good post关于这一点。

Javascript

function bounceAgain() {
  var el = document.getElementById("test");
  el.classList.remove('bounceInUp');
  el.offsetWidth = el.offsetWidth;
  el.classList.add('bounceInUp');
}

HTML

向 onclick 添加了 bounceAgain()。

<div class="animated bounceInUp zoomin" style="text-align:center;">
  <img src="http://i.imgur.com/alhBkw5.png" onclick="bounceAgain()" width="300px" height="200px">
</div>