Trigger Same CSS Animation on Every Click

Trigger same CSS animation on every click

You can listen to when the animation ends, then remove the class 'on'

var animationEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';
$('.addtocart').click(function () { 
  $(this).addClass('on');
  $(this).one(animationEvent, function(event) {
    $(this).removeClass('on')
  });
}); 

$('.addtocart').click(function () {   $(this).addClass('on');  $(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {    $(this).removeClass('on')  });}); 

.addtocart {  position:relative;  width:100px;  display:block;  background-color:#000;  color:#fff;  padding:10px;  text-align:center; } .addtocart.on {    -webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;    -moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;    -ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;    -o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;    animation: cartbtnFade 0.6s 0.1s 1 linear alternate; }
@keyframes cartbtnFade {  0% {    opacity: 0;    transform:translateY(-100%);  }  10% {   transform:translateY(-100%);
  }  15% {   transform:translateY(0); } 30% {   transform:translateY(-50%);    } 40% {    transform:translateY(0%);
 }  100% {    opacity: 1;  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a href="#" class="addtocart">click me</a>

trigger animation on each click using javascript

Just replace this with your code and it will work fine(the way you expect it to work)

const card = document.getElementById('card')
function nextCard(){
 card.addEventListener("click",flipTheCard);
}

function flipTheCard(){ 
  card.classList.add('newCard');
  setTimeout(()=> {
    card.classList.remove('newCard')
  },1500)
}

Below is the small example which reflects to your question

const btn = document.querySelector('.btn')

const box = document.querySelector('.box')

btn.addEventListener('click', () => {
  box.classList.add('animate')
  
  setTimeout(() => {
    box.classList.remove('animate')
  },1500)
})

.box{
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: auto;
  margin-top: calc(100vh - 60vh);
}

.box.animate{
    animation: spin 1.5s forwards;
}

@keyframes spin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

  <div class='box'></div>
  
  <button class="btn">click</button>

CSS animation triggered through JS only plays every other click

The issue is because the first click adds the class and triggers the animation, yet the second (and every even numbered click) after that removes the class so nothing happens.

To fix this you can use the animationend event to remove the class automatically after the animation has ended. That way when you next click again the class is added to the element once more and the animation plays. Try this:

var anim = document.getElementById("anim");
var willCheck = document.getElementById("contactId");

anim.addEventListener('click', () => {
  willCheck.classList.add("highAnim");
});

willCheck.addEventListener('animationend', () => {
  willCheck.classList.remove("highAnim");
});

#contactId { background: red; }

.highAnim {
  background-color: var(--white);
  animation-name: highcheck;
  animation-duration: 0.35s;
  animation-timing-function: ease-in-out;
}

@keyframes highcheck {
  0% { transform: rotate(0); }   
  50% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}

<a id="anim">Click</a><br><br>
<div id="contactId">Some Text</div>

Trigger Animate.css animation on each click in React

class App extends React.Component {  state = {   classes:"animated jackInTheBox",    quotes: [{quote: "a", author: 1},            {quote: "b", author: 2},            {quote: "c", author: 3}],    quote: {quote: "a", author: 1}  }
  handleClick = () => {    this.setState({      quote: this.state.quotes[Math.floor(Math.random()*3)],      classes:"hidden"    }, () => {         setTimeout(() => this.setState({classes:"animated jackInTheBox"}),100)      });  }    render() {
    // assign random quote    const quote = this.state.quotes.length ? (this.state.quote.quote) : ("Wait o");
    // assign author    const author = this.state.quotes.length ? (this.state.quote.author) : ("");       return(           <div className="App">        <p className={this.state.classes}>          {quote}        </p>        <p className={this.state.classes}>          {author}        </p>        <button id="new-quote" onClick={this.handleClick}>          New Quote        </button>      </div>     )   }}
ReactDOM.render(  <App />,  document.getElementById('root'));

<style>.hidden{opacity:0}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></head><div id="root"></div>

triggering multiple css animations with one click

You can assign a simple onclick event handler to the designated h2 element that will assign ( toggle ) a particular class to the elements that you wish to animate. If the initial animation-play-state is set to paused you can assign, in the new class, a value of running to start the animations.

Not knowing all the CSS classes used or wishing to write out multiple classes for animations the below uses a very simple animation for all elements ~ you will have to substitute your real animations.

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Trigger CSS Animations by clicking link</title>
        <script>
            document.addEventListener('DOMContentLoaded',()=>{
                document.querySelector('.trigger').addEventListener('click',()=>{
                    Array.from( document.querySelectorAll( '.animated' ) ).forEach( div=>{
                        div.classList.toggle('activated')
                    })
                });
            })
        </script>
        <style>
            .animated{
                animation-play-state:paused;
            }
            .activated{
                animation-play-state:running
            }

            .bounceInLeft,
            .bounceInRight,
            .bounceInLeft,
            .bounceInRight,
            .bounceInLeft,
            .bounceInRight,
            .bounceInLeft,
            .bounceInRight{
                opacity:1;
                color:black;
                font-size:1.5rem;

                animation-duration:2s;
                animation-name:geronimo;
                animation-direction:normal;
                animation-fill-mode:forwards;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
            }

            @keyframes geronimo{
                from{opacity:1;color:black}
                50%{color:red}
                to{opacity:0;color:blue;}
            }

            /* animations */
            #sub1{
                animation-delay: 0s;
            }
            #sub2{
                animation-delay: 0.1s;
            }
            #sub3{
                animation-delay: 0.2s;
            }
            #sub4{
                animation-delay: 0.3s;
            }
            #sub5{
                animation-delay: 0.4s;
            }
            #sub6{
                animation-delay: 0.5s;
            }
            #sub7{
                animation-delay: 0.6s;
            }
            #sub8{
                animation-delay: 0.7s;
            }
        </style>
    </head>
    <body>

        <div>
            <div class="menu-hover">
                <a href="#">
                    <h1>Season</h1>
                </a>
            </div>
            <div class="menu-hover">
                <a href="#">
                    <h1 class="trigger">Collection's</h1>
                </a>
            </div>
            <div class="menu-hover">
                <a href="#">
                    <h1>My account</h1>
                </a>
            </div>
         </div>

         <div>
            <a href="#"><h2 id="sub1" class="hidden-h2 animated bounceInLeft">For me</h2></a>
            <a href="#"><h2 id="sub2" class="hidden-h2 animated bounceInRight">Furry friend</h2></a>
            <a href="#"><h2 id="sub3" class="hidden-h2 animated bounceInLeft">Ambient</h2></a>
            <a href="#"><h2 id="sub4" class="hidden-h2 animated bounceInRight">Home</h2></a>
            <a href="#"><h2 id="sub5" class="hidden-h2 animated bounceInLeft">DustOnLens</h2></a>
            <a href="#"><h2 id="sub6" class="hidden-h2 animated bounceInRight">Tilbehöör</h2></a>
            <a href="#"><h2 id="sub7" class="hidden-h2 animated bounceInLeft">Coolio</h2></a>
            <a href="#"><h2 id="sub8" class="hidden-h2 animated bounceInRight">?Mystery?</h2></a>
        </div>

    </body>
</html>

document.addEventListener('DOMContentLoaded',()=>{document.querySelector('.trigger').addEventListener('click',()=>{ Array.from( document.querySelectorAll( '.animated' ) ).forEach( div=>{  div.classList.toggle('activated') })});})

.animated{ animation-play-state:paused;}.activated{ animation-play-state:running}
.bounceInLeft,.bounceInRight,.bounceInLeft,.bounceInRight,.bounceInLeft,.bounceInRight,.bounceInLeft,.bounceInRight{ opacity:1; color:black; font-size:1.5rem;  animation-duration:2s; animation-name:geronimo; animation-direction:normal; animation-fill-mode:forwards; animation-iteration-count: infinite; animation-timing-function: linear;}

@keyframes geronimo{ from{opacity:1;color:black} 50%{color:red} to{opacity:0;color:blue;}}

/* animations */#sub1{ animation-delay: 0s;}#sub2{ animation-delay: 0.1s;}#sub3{ animation-delay: 0.2s;}#sub4{ animation-delay: 0.3s;}#sub5{ animation-delay: 0.4s;}#sub6{ animation-delay: 0.5s;}#sub7{ animation-delay: 0.6s;}#sub8{ animation-delay: 0.7s;}

<div> <div class="menu-hover">  <a href="#">   <h1>Season</h1>  </a> </div> <div class="menu-hover">  <a href="#">   <h1 class="trigger">Collection's</h1>  </a> </div> <div class="menu-hover">  <a href="#">   <h1>My account</h1>  </a> </div> </div>  <div> <a href="#"><h2 id="sub1" class="hidden-h2 animated bounceInLeft">For me</h2></a> <a href="#"><h2 id="sub2" class="hidden-h2 animated bounceInRight">Furry friend</h2></a> <a href="#"><h2 id="sub3" class="hidden-h2 animated bounceInLeft">Ambient</h2></a> <a href="#"><h2 id="sub4" class="hidden-h2 animated bounceInRight">Home</h2></a> <a href="#"><h2 id="sub5" class="hidden-h2 animated bounceInLeft">DustOnLens</h2></a> <a href="#"><h2 id="sub6" class="hidden-h2 animated bounceInRight">Tilbehöör</h2></a> <a href="#"><h2 id="sub7" class="hidden-h2 animated bounceInLeft">Coolio</h2></a> <a href="#"><h2 id="sub8" class="hidden-h2 animated bounceInRight">?Mystery?</h2></a></div>

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 div click

Note that in your code, the elements that have "animation" css rules are the LI elements. So changing the animation property of the UL's style won't work.

Here I changed your CSS a bit so that you can give the UL the class of "animate" and the child LIs will animate. When you press the button it removes that class, and then using a setTimeout re-adds it, it should reset and replay the animation.

document.getElementById("clickable").addEventListener("click", controlAnimation);

function controlAnimation() {
  const menu = document.querySelector('#menu-main-menu');
  menu.classList.remove('animate');
  setTimeout(() => {
    menu.classList.add('animate');
  }, 0);
}

#menu-main-menu li {
  border-bottom: solid 1px #999;
}

#menu-main-menu.animate li {
  opacity: 0;
  -webkit-animation: fadeInMenu 0.5s 1;
  animation: fadeInMenu 0.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#menu-main-menu.animate li:nth-child(5n+1) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

#menu-main-menu.animate li:nth-child(5n+2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

#menu-main-menu.animate li:nth-child(5n+3) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

#menu-main-menu.animate li:nth-child(5n+4) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

#menu-main-menu.animate li:nth-child(5n+5) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

/* Animation steps */

@-webkit-keyframes fadeInMenu {
  0% {
    opacity: 0.0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1.0;
  }
}

@keyframes fadeInMenu {
  0% {
    opacity: 0.0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1.0;
  }

<div id="clickable" >Click me</div>
<br>
<ul id="menu-main-menu" class='animate'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>

</ul>

CSS Animation onClick

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" />

---

Related Topics