JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Scariest, Gnarliest CSS3 Animation Event jQuery Question Ever!</h1>  
<ul id="main" role="main" class="hbox">

            <li id="aaa" class="box">
                <h1>aaa</h1>
            </li><!-- END aaa -->
            
            <li id="bbb" class="box">
                <h1>bbb</h1>
            </li><!-- END bbb -->
            
            <li id="ccc" class=" box">
                <h1>ccc</h1>
            </li><!-- END ccc -->

            <li id="ddd" class="box ">
                <h1>ddd</h1>
            </li><!-- END ddd -->
            
            <li id="eee" class="box">
                <h1>eee</h1>
            </li><!-- END eee -->
            
    </ul><!-- END MAIN -->

CSS

html {
    background: #fff1af;
    padding:20px;
    }

h1 {text-align:center; font-size: 1.5em; margin-bottom:2em; font-family:helvetica, sans-serif;}

#main { 
  border: 2px dotted #DF9300;
  height: 300px;
  list-style: none outside none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 500px;
    }

.box {
    height:100px;
    margin:0 10px 0 0;
  padding: 0 20px;
    border-radius: 10px;
    background:#fff;
    float:left;
    border:10px solid gold;
    }

.move-x {
    background-color:red !important;
    -webkit-transform-origin : 50% 50%;
    -webkit-animation : move-x 1s 1;
    -webkit-animation-fill-mode : both; 
    -moz-transform-origin : 50% 50%;
    -moz-animation : move-x 1s 1;
    -moz-animation-fill-mode : both;
    }

.move-x-rvs {
     background-color:red !important;
    -webkit-transform-origin : 50% 50%;
    -webkit-animation : move-x-rvs 1s 1;
    -webkit-animation-fill-mode : both;
    -moz-transform-origin : 50% 50%;
    -moz-animation : move-x-rvs 1s 1;
    -moz-animation-fill-mode : both;
    }

.move-y {
    background-color:green !important;
    -webkit-transform-origin : 50% 50%;
    -webkit-animation : move-y 1s 1;
    -webkit-animation-fill-mode : both; 
    -moz-transform-origin : 50% 50%;
    -moz-animation : move-y 1s 1;
    -moz-animation-fill-mode : both;
    }

.move-y-rvs {
     background-color:green !important;
    -webkit-transform-origin : 50% 50%;
    -webkit-animation : move-y-rvs 1s 1;
    -webkit-animation-fill-mode : both;
    -moz-transform-origin : 50% 50%;
    -moz-animation : move-y-rvs 1s 1;
    -moz-animation-fill-mode : both;
    }

    @-webkit-keyframes move-y {
     0% { -webkit-transform : translate(0,0); }
     100% { -webkit-transform : translate(0,200px); }
     }

    @-moz-keyframes move-y {
     0% { -moz-transform : translate(0,0); }
     100% { -moz-transform : translate(0,200px); }
     }

    @-webkit-keyframes move-y-rvs {
     100% { -webkit-transform : translate(0,0); }
    ...

JavaScript

var  $main = $("#main"), $box = $("#main .m-box");

 $mbox.click(function() {
    
    var $this = $(this);
    
     $mbox.each(function (i) {
         if($this.hasClass('move-y')) {
             $this.removeClass('move-y').addClass('move-y-rvs').bind(
                 "webkitAnimationEnd", function(){
                 $this.style.webkitAnimationName = "";
                     $this.removeClass('move-y-rvs');
             });
             } 
             else if($this.hasClass('move-x')) {
             $this.removeClass('move-x').addClass('move-x-rvs').bind(
                     "webkitAnimationEnd", function(){
                     $this.style.webkitAnimationName = "";
                         $this.removeClass('move-x-rvs');
                 });    
             }
             else {
                 //do nothing?
                 }
         });
     
     });