Trigger Animation on Element Click in Pure CSS

Trigger animation on element click in pure CSS

Answering my own question. By abusing the :not pseudo class we can trigger an animation after a onclick happened:

#btn:not(:active) {
    /* now keep red background for 1s */
    transition: background-color 1000ms step-end;
}

#btn:active {
    background: red;
}

Trigger CSS Animation on Click via javascript

A bit ugly, because of the extra class needed, but it works:

var hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click', function() {
  var hamburgerMenuSpan2 = document.querySelector('.hamburger-second');

  if (hamburgerMenuSpan2.classList.contains("animate-out")) {
    hamburgerMenuSpan2.classList.remove("animate-out");
    hamburgerMenuSpan2.classList.add("animate-in");
  } else {
    hamburgerMenuSpan2.classList.add("animate-out");
    hamburgerMenuSpan2.classList.remove("animate-in");
  }

});

.hamburger-menu {
  position: absolute;
  top: 20px;
  right: 20px;
}

.hamburger-line-2 {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.animate-out {
  animation-name: animate-out;
}

.animate-in {
  animation-name: animate-in;
}

@keyframes animate-out {
  0% {
    width: 40px;
  }
  100% {
    width: 0px;
  }
}

@keyframes animate-in {
  0% {
    width: 0px;
  }
  100% {
    width: 40px;
  }
}

.hamburger-menu span {
  display: block;
  width: 40px;
  height: 2px;
  background: black;
  margin: 10px 0px;
}

<div class="hamburger-menu">
  <span class="hamburger-line-1"></span>
  <span class="hamburger-second hamburger-line-2"></span>
  <span class="hamburger-line-3"></span>
</div>

Pure CSS method of running an animation through on click

Try this out but you need to use jquery to keep the button active , i didn't used jquery therefore hold the click;

@-webkit-keyframes ripple {  0% {    background-size: 1% 1%;    opacity: 0.5;  }  70% {    background-size: 1000% 1000%;    opacity: 0.2;  }  100% {    opacity: 0;    background-size: 1000% 1000%;  }}
@keyframes ripple {  0% {    background-size: 1% 1%;    opacity: 0.5;  }  70% {    background-size: 1000% 1000%;    opacity: 0.2;  }  100% {    opacity: 0;    background-size: 1000% 1000%;  }}
.button {  background-color: blue;  padding: 12px;  display: inline-block;  border-radius: 5px;  color: white;  font-family: sans-serif;  text-transform: uppercase;  position: relative;  overflow: hidden;}

.button:active:after{  position: absolute;  content: " ";  height: 100%;  width: 100%;  top: 0;  left: 0;  pointer-events: none;  background-image: radial-gradient(circle at center, #FFF 0%, #FFF 10%, transparent 10.1%, transparent 100%);  background-position: center center;  background-repeat: no-repeat;  background-color: transparent;  -webkit-animation: ripple 0.6s 0s normal forwards infinite running ease-in;  animation: ripple 0.6s 0s normal forwards infinite running ease-in;}

<div class='ripple button'><a href=''>hell</a></div>

Trigger CSS Animations in JavaScript

The simplest method to trigger CSS animations is by adding or removing a class - how to do this with pure Javascript you can read here:

How do I add a class to a given element?

If you DO use jQuery (which should really be easy to learn in basic usage) you do it simply with addClass / removeClass.

All you have to do then is set a transition to a given element like this:

.el {
    width:10px;
    transition: all 2s;
}

And then change its state if the element has a class:

.el.addedclass {
    width:20px;
}

Note: This example was with transition. But for animations its the same: Just add the animation on the element which has a class on it.

There is a similar question here: Trigger a CSS keyframe animation via scroll

How to trigger a css animation with vanilla javascript

I think adding class is a healthy way to do it.

Check the example here: https://codepen.io/yasgo/pen/zYBgjXN

document.getElementById('box').classList.add('active-animation');

.box {
  width: 50px;
  height: 50px;
  background-color: black;
}

.box.active-animation {
  animation: party 5s infinite;
}

@keyframes party{
    0% {background-color: red;}
    10% {background-color: orange;}
    20% {background-color: yellow;}
    30% {background-color: green;}
    40% {background-color: blue;}
    50% {background-color: purple;} 
}

<div id="box" class="box"></di>

How can add animate.css class onclick event in pure javascript?

You could add a class to a DOM element using the classList property.
See the MDN entry for classList: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

You could then remove the class using a setTimeout function.

So your animation function could look something like this:

function animations() {
  var elem = document.getElementById("animate");

  elem.classList.add('fade-in'); // Add .fade-in class

  setTimeout(function() {
    elem.classList.remove('fade-in'); // Remove .fade-in class
  }, 5000); // 5000ms
}

---

Related Topics