CSS Animation onClick

Question

How can I get a CSS Animation to play with a JavaScript onClick? I currently have:

.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration:3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  }
  to {
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}

How can I apply an onClick?

Solution 1

Are you sure you only display your page on webkit? Here is the code, passed on safari. The image (id='img') will rotate after button click.

function ani() {
  document.getElementById('img').className = 'classname';
}

.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  }
  to {
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}

<input name="" type="button" onclick="ani()" value="Click">
<img id="img" src="https://i.stack.imgur.com/vghKS.png" width="328" height="328" />

Solution 2

You just use the :active pseudo-class. This is set when you click on any element.

.classname:active {
    /* animation css */
}

Solution 3

Found solution on css-tricks

const element = document.getElementById('img')

element.classList.remove('classname'); // reset animation
void element.offsetWidth; // trigger reflow
element.classList.add('classname'); // start animation

Solution 4

You can achieve this by binding an onclick listener and then adding the animate class like this:

$('#button').onClick(function(){
    $('#target_element').addClass('animate_class_name');
});

Solution 5

CSS ONLY solution that works on every click and plays the animation to the end:

All you have to do is to add the animation to the :focus pseudo class and set it to none in :active pseudo class.

If your element isn't focusable add tabindex="0" attribute to the html element:

@keyframes beat {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(0.8,0.8);
            transform: scale(0.8, 0.8);
  }
}
.className {
  background-color:#07d;  
  color: #fff;
  font-family: sans-serif;
  font-size: 20px;
  padding: 20px;
  margin:5px;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.className:focus {
  -webkit-animation: beat 1s ease-in-out backwards;
          animation: beat 1s ease-in-out backwards;
}
.className:active {
  -webkit-animation: none;
          animation: none;
}
body {
  text-align: center;
} 

<h3>Any element with tabindex="0", like a div:</h3>
<div tabindex="0" class="className"> Click me many times!</div>
<h3>Any focusable element like a button:</h3>
<button class="className"> Click me many times!</button>

View more solutions

Comments

[Paul Fisher]

Ah, I misunderstood your question. I think Ravi's answer will work for you in that case.

[John Fish]

Basically, what you're telling jQuery to do is the following: First line: jQuery targets the element that has ID of button, and creates a function for when the user clicks the element. Second line: This is the element that'll get effected by the click. It targets the element with an id of target_element, and adds the class animate_class_name to that element. Trust me, this solution works, I've used it in the past.

[adg]

This was very useful to me. It ran the animation only while the user was holding down the mouse button which was exactly what I needed.

[Drew Kennedy]

Just be mindful that using .className will wipe out all of your other classes on the given element. If this is undesired, use document.getElementById('img').classList.add('classname');

[b_d_m_p]

This is what I needed too.

[he77kat_]

Triggering the reflow on the middle line is a nifty trick. just what i needed

[Asela Priyadarshana]

Thank you for this Answer, Which was exactly what I am looking for.

[Wil]

the one issue I see with this: if I click either of the demo controls then switch tabs, then switch back, the animation plays without clicking it.

[Max S.]

This animates only the first time уоu click. Subsequent clicks do nothing. Use sad comrade method below to enable multiple clicks.