Reputation: 79

CSS animations in html

I have animations in html that play when the page loads.

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

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

bounceInUp is a CSS animation in my stylesheet. How would I play an animation from the stylesheet onclick?

Upvotes: 2

Answers (1)

adriancarriger

Reputation: 3000

Working Plunker

There are several ways to restart an animation using onclick. Chris Coyier has a good post on this.

Javascript

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

HTML

Added bounceAgain() to 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>