title: Chaining the checkbox animation using css
body: <p>I am new to CSS Animations and am trying to chain animation of checkboxes being checked. Basically, I have a list of Items and corresponding checkboxes. My aim is to start checking the checkboxes one after the other.</p>
  
  <p>I have done the checking animation (animated tick) with the help of few online tutorials. Though now I am unable to figure out a way to replicate the clicking event of checkboxes to start the animation.  </p>
  
  <p><a href="https://jsfiddle.net/vishsid73/a7L5kdvL/2/" rel="nofollow">https://jsfiddle.net/vishsid73/a7L5kdvL/2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@-moz-keyframes 
  dothabottomcheck {  0% {
   height: 0;
  }
   100% {
   height: 25px;
  }
  }
  @-webkit-keyframes 
  dothabottomcheck {  0% {
   height: 0;
  }
   100% {
   height: 25px;
  }
  }
  @keyframes 
  dothabottomcheck {  0% {
   height: 0;
  }
   100% {
   height: 25px;
  }
  }
  @keyframes 
  dothatopcheck {  0% {
   height: 0;
  }
   50% {
   height: 0;
  }
   100% {
   height: 70px;
  }
  }
  @-webkit-keyframes 
  dothatopcheck {  0% {
   height: 0;
  }
   50% {
   height: 0;
  }
   100% {
   height: 70px;
  }
  }
  @-moz-keyframes 
  dothatopcheck {  0% {
   height: 0;
  }
   50% {
   height: 0;
  }
   100% {
   height: 70px;
  }
  }
  
  input[type=checkbox] { display: none; }
  
  .check-box {
    height: 50px;
    width: 50px;
    background-color: transparent;
    border: 5px solid black;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
  }
  
  .check-box::before,
  .check-box::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: 10px;
    background-color: #23527c;
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 5px;
    content: ' ';
    -webkit-transition: opacity ease .5;
    -moz-transition: opacity ease .5;
    transition: opacity ease .5;
  }
  
  .check-box::before {
    top: 40px;
    left: 20px;
  /*  box-shadow: 0 0 0 5px #667788;*/
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  
  .check-box::after {
  /*  top: 37px; */
    top: 20px; 
    left: 0px;
  /*  left: 5px;*/
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  
  input[type=checkbox]:checked + .check-box,
  .check-box.checked { border-color: #23527c; }
  
  input[type=checkbox]:checked + .check-box::after,
  .check-box.checked::after {
  /*  height: 50px;*/
    height: 25px;
    -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
    animation: dothabottomcheck 0.2s ease 0s forwards;
  }
  
  input[type=checkbox]:checked + .check-box::before,
  .check-box.checked::before {
  /*  height: 120px;*/
    height: 70px;
    -moz-animation: dothatopcheck 0.4s ease 0s forwards;
    -o-animation: dothatopcheck 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
    animation: dothatopcheck 0.4s ease 0s forwards;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;h2&gt;Sid Anim&lt;/h2&gt;
    &lt;input type="checkbox" id="cbtest" /&gt;
      &lt;label for="cbtest" class="check-box"&gt;&lt;/label&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;input type="checkbox" id="cbtest1" /&gt;
      &lt;label for="cbtest1" class="check-box"&gt;&lt;/label&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;input type="checkbox" id="cbtest2" /&gt;
      &lt;label for="cbtest2" class="check-box"&gt;&lt;/label&gt;
      
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please Guide how to chain the animation with 1.5 sec gap after previous</p>