Start a CSS Animation on Button Click

Start a css animation on button click

$(function(){ $('#second-parent').click(function(){  e1 = $('#first-child');        e1.addClass('animate');        e1.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',        function (e) {            e1.removeClass('animate');        }); });});

 #first-child {  height: 200px;  width: 200px;  background: white;  border-radius: 0%;  margin-top: 150px;  margin-bottom: 0px;  margin-left: 500px;  margin-right: 0px;  }  .animate {  -webkit-animation: myfirst 3s;  animation: myfirst 3s;  }@keyframes myfirst {    0% {background: white;}   40% {background: gray;}   70% {background: yellow;}  100% {background: red;}  }@-webkit-keyframes myfirst {    0% {background: white;}   40% {background: gray;}   70% {background: yellow;}  100% {background: red;}  }
#second-parent {  margin-top: 0px;  margin-bottom: 0px;  margin-left: 415px;  margin-right: 0px;  }

<div id="first-child"></div><button id="second-parent">Click me !</button><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to enable CSS animation with a button everytime when the user clicks on then it starts over

you need to use animationend event

<div class="ExampleButtonCSS">
  <button id="ExampleButton"> Fade in and Out </button>
</div>

const explmButton = document.getElementById('ExampleButton')

explmButton.onclick = () =>
  {
  explmButton.classList.add('Animation')
  }
explmButton.onanimationend = () =>
  {
  explmButton.classList.remove('Animation')
  }

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