Start a css animation on button click

Question

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

Answer 1

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

Click me !

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

  Click me !