trigger CSS animations onlcick

user_18749472 0
Viewed 55

I have created an animation for an element on my page and it always runs when the page is refreshed but i would like the animation to play when an element is clicked. How would i go about doing this?

CSS:

#login-or-signup-selection {
    display: flex;
    animation-name: test;
    animation-duration: 5s;
    position: relative;
    height: 70%;
}

@keyframes test {
    0% {top: 0px;}
    50% {top:300px}
    100% {top: 0;}
}

HTML:

<p id="clickMe">Element to click</p>
css-animations onclick animation css html
4 Answers

$('#clickMe').click(function () { 
  $(this).addClass('login-or-signup-selection');
  $(this).on("animationend", function(event) {
    $(this).removeClass('login-or-signup-selection')
  });
});
.login-or-signup-selection {
    display: flex;
    animation-name: test;
    animation-duration: 5s;
    position: relative;
    height: 70%;
}

@keyframes test {
    0% {top: 0px;}
    50% {top:300px}
    100% {top: 0;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="clickMe">Element to click</p>

user_64837270

If you want only css and don't even care about js onclick events for now,

use the :active pseudo selector.

The only downside is that it only plays while (=during) e.g. the mouse button is down.

user_148240670

You would need some JavaScript for this.

First off, separate the CSS animation properties, and anything else related to your animation, and add them to their own class.

Next up, the JavaScript. You'll want to add an event listener to your element to add the animation class when clicked, and a timeout to remove the class afterwards so it will animate when clicked again.

const yourElement = document.getElementById('clickMe');
yourElement.addEventListener('click', _=> {
  yourElement.classList.add('animation-class');
  setTimeout(
    _=> yourElement.classList.remove('animation-class'),
    5000
  )
});
#clickMe {
    display: flex;
    position: relative;
    height: 70%;
}

.animation-class {
  animation-name: test;
  animation-duration: 5s;
}

@keyframes test {
    0% { top: 0px; }
    50% { top: 300px; }
    100% { top: 0; }
}
<p id="clickMe">Element to click</p>

user_36141140

You need JavaScript for this.

If you add an event listener on the p element to listen for a click, this can then add the animation name to the selection div.

But you need to also listen for the end of the animation, otherwise subsequent clicks will have no effect. On animation end this snippet removes the animation name.

Note also that in order to be absolutely sure that the first (onload) animation end is trapped, the first animation name is not set until the event listeners have been set up.

function init() {
  const clickMe = document.querySelector('#clickMe');
  const selection = document.querySelector('#login-or-signup-selection');
  clickMe.addEventListener('click', function() {
    selection.style.animationName = 'test';
  });
  selection.addEventListener('animationend', function() {
    selection.style.animationName = '';
  });
  selection.style.animationName = 'test';
}
window.onload = init;
#login-or-signup-selection {
  display: flex;
  animation-duration: 5s;
  animation-iteration-count: 1;
  position: relative;
  height: 70%;
}

@keyframes test {
  0% {
    top: 0px;
  }
  50% {
    top: 300px
  }
  100% {
    top: 0;
  }
}
<p id="clickMe">Element to click</p>
<div id="login-or-signup-selection">Login or signup selection</div>

user_108674540
Related