小编Nik*_*kki的帖子

嗨，我一直在寻找关于我的问题的答案，也许已经有几个星期了，但我什么都没找到。我正在尝试进行反应测试，以检查用户反应之前需要花费多长时间，它将弹出一个正方形或一个圆形，我遇到了问题...

我的问题是，当用户单击屏幕上的按钮时，是否可以启动动画？

到目前为止，这是我的代码：

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

我更喜欢CSS，HTML，jQuery或Javascript。但是，如果还有另一种方法，我也会很高兴听到。