JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

Click the puppy
<div class="test">

</div>

CSS

.test{
background:url('http://www.placedog.com/100/100');
        height:100px;
    width:100px;
    display:block;
    position:relative;
    margin:20% auto;

}


.holder{
    position:absolute;
}

.holder div{
    margin: 0;
    padding: 0;
    position: absolute;
    opacity:.6;
    -webkit-transform-origin:50% 50%;
}

.red{
      -webkit-animation: red 3s ease;
    -webkit-filter:  hue-rotate(90deg) saturate(500%) ; 

}
.green{
    -webkit-animation: green 3s ease;
    -webkit-filter:  hue-rotate(180deg) saturate(500%) ;
}

.blue{
    -webkit-animation: blue 3.3s ease;
    -webkit-filter:  hue-rotate(270deg) saturate(500%) ;
}

@-webkit-keyframes red {
    0%   { margin-left: 0; }
    30%   { margin-left: -100px; }
    70%   { margin-left: -100px; }
    100% { margin-left: 0; }
}

@-webkit-keyframes green {
    0%   { margin-left: 0; }
    20%   { margin-left: 0; }
    100% { margin-left: 0; }
}

@-webkit-keyframes blue {
    0%   { margin-left: 0; }
    30%   { margin-left: 100px;  }
    70%   { margin-left: 100px;  }
    100% { margin-left: 0; }
}

JavaScript

$('.test').on('click', function(){

    var red = $(this).clone().addClass('red');
    var green = $(this).clone().addClass('green');
    var blue = $(this).clone().addClass('blue');
    
    var holder = $('<div>').addClass('holder').append(red).append(green).append(blue);
    $(this).before(holder);    
        
    holder.css({
        top: $(this).offset().top,
        left: $(this).offset().left
    });
    
    $(this).hide();
    
    var transfer = $(this);
    
    blue.on('webkitAnimationEnd', function(){
transfer.show();
 $('.holder').remove();       
    });

})