在按钮点击时启动css动画 [英] Start a css animation on button click

问题描述

您好我一直在寻找关于我的问题的答案现在可能几个星期了，我什么也找不到。我试图做一个反应测试，以检查用户需要多长时间，他们的反应，它会弹出一个正方形或一个圆圈，我遇到了一个问题...

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：

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

我更喜欢CSS，HTML，jQuery或Javascript。

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

推荐答案

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

这篇关于在按钮点击时启动css动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！