Hi I've been looking for answers on my problem now for maybe a few weeks now and I find nothing. I'm trying to make a reaction test to check how long time it takes for the user before they react and it will popup either a square or a circle and I hit a problem...

My question is if there's any way to start an animation when the user clicks the button on the screen ?

Here's my code so far:

HTML:

  <div id="first-child"></div>
  <button id="Second-parent">Click me !</button>

CSS:

 #first-child {
  height: 200px;
  width: 200px;
  background: white;
  border-radius: 0%;
  margin-top: 150px;
  margin-bottom: 0px;
  margin-left: 500px;
  margin-right: 0px;
  -webkit-animation: myfirst 1s;
  animation: myfirst 1s;
  }
@-webkit-animation myfirst {
    0% {background: white;}
   20% {background: white;}
   40% {background: white;}
   60% {background: white;}
   80% {background: white;}
  100% {background: red;}
  }

#second-parent {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 415px;
  margin-right: 0px;
  }

I prefer CSS, HTML, jQuery or Javascript. But if there's another way to do it I'll gladly hear that too.

Hi I've been looking for answers on my problem now for maybe a few weeks now and I find nothing. I'm trying to make a reaction test to check how long time it takes for the user before they react and it will popup either a square or a circle and I hit a problem...

My question is if there's any way to start an animation when the user clicks the button on the screen ?

Here's my code so far:

HTML:

  <div id="first-child"></div>
  <button id="Second-parent">Click me !</button>

CSS:

 #first-child {
  height: 200px;
  width: 200px;
  background: white;
  border-radius: 0%;
  margin-top: 150px;
  margin-bottom: 0px;
  margin-left: 500px;
  margin-right: 0px;
  -webkit-animation: myfirst 1s;
  animation: myfirst 1s;
  }
@-webkit-animation myfirst {
    0% {background: white;}
   20% {background: white;}
   40% {background: white;}
   60% {background: white;}
   80% {background: white;}
  100% {background: red;}
  }

#second-parent {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 415px;
  margin-right: 0px;
  }

I prefer CSS, HTML, jQuery or Javascript. But if there's another way to do it I'll gladly hear that too.

• javascript
• jquery
• html
• css

5 Answers 5

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

$(function(){
		$('#second-parent').on('click',function(){
			$('#first-child').addClass('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;}
  }

#second-parent {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 415px;
  margin-right: 0px;
  }

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

Use a css class for the animation and add the class to div when button clicked. (use @keyframes to define css animations.)

Here is a solution using pure javascript and CSS @keyframes:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta charset="utf-8" />
  <title>CSS Animations</title>

  <style>
/* <![CDATA[ */
div {
  height: 2em;
  width: 50%;
  border: 1px solid black;
  background-color: black;
  color: yellow;
}

.animate {
  animation-name: slide-right;
  animation-duration: 2s;
  /* Preserve the effect of the animation at ending */
  animation-fill-mode: forwards;
}

@keyframes slide-right {

  from {
    margin-left: 0px;
  }

  50% {
    margin-left: 110px;
    opacity: 0.5;
  }

  to {
    margin-left: 200px;
    opacity: 0.2;
  }
}

/* ]]> */
  </style>

  <script>
/* <![CDATA[ */

function DoAnimation() {
  var targetElement = document.getElementById("target");
  targetElement.className = "animate";
}
/* ]]> */
  </script>
</head>
<body>
  <h1>CSS Animations</h1>
  <div id="target">Super div</div>
  <button onclick="DoAnimation();">Go</button>
</body>
</html>

Remove the -webkit-animation and animation definitions from #firstChild and instead create an "anim" class definition:

#first-child {
    height: 200px;
    width: 200px;
    background: white;
    border-radius: 0%;
    margin-top: 150px;
    margin-bottom: 0px;
    margin-left: 500px;
    margin-right: 0px;
}
.anim{
    -webkit-animation: myfirst 1s;
    animation: myfirst 1s;
}

Then when you want to trigger the animation simply add the .anim class to your element with jQUery:

$("#first-child").addClass("anim");

Here the sample for you

#first-child {
  height: 200px;
  width: 200px;
  background: white;
  border-radius: 0%;
  margin-top: 150px;
  margin-bottom: 0px;
  margin-left: 500px;
  margin-right: 0px;
  -webkit-animation: myfirst 1s;
  animation: myfirst 1s;
  }
@-webkit-animation myfirst {
    0% {background: white;}
   20% {background: white;}
   40% {background: white;}
   60% {background: white;}
   80% {background: white;}
  100% {background: red;}
  }

.second-parent {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 415px;
  margin-right: 0px;
  }

<script>
$(document).ready(function()
{
    $('#Second-parent').click(function()
    {
        $('#first-child').addClass('second-parent');
     });
});
</script>

</head>

<body>
  <div id="first-child"></div>
  <button id="Second-parent">Click me !</button>
</body>

</html>

==> please add the jquery library in the , you can download lirabry in: http://jquery.com/download/