title: Start a css animation on button click
body: <p>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...</p>
  
  <p>My question is if there's any way to start an animation when the user clicks the button on the screen ?</p>
  
  <p>Here's my code so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div id="first-child"&gt;&lt;/div&gt;
    &lt;button id="Second-parent"&gt;Click me !&lt;/button&gt;
  </code></pre>
  
  <p>CSS:
    </p>
  
  <pre><code> #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;
    }
  </code></pre>
  
  <p>I prefer CSS, HTML, jQuery or Javascript. But if there's another way to do it I'll gladly hear that too.</p>