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

添加 bounceAgain() 到 onclick。

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