CODEWITHSUNDEEP
htmlcssanimationonclickcss-animations
logan_9997
logan_9997

Reputation: 619

trigger CSS animations onlcick

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>

Upvotes: 2

Views: 1446

Answers (4)

A Haworth
A Haworth

Reputation: 36492

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>

Upvotes: 0

FrankieD
FrankieD

Reputation: 452

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>

Upvotes: 0

LuckyLuke Skywalker
LuckyLuke Skywalker

Reputation: 791

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.

Upvotes: 0

Gurgolo
Gurgolo

Reputation: 332

$('#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>

Upvotes: 0

Related Questions