JSFiddle - React, Tailwind, and code Playground

by bigood

HTML

<div id="removeAnimate1" class="button">Remove animate1</div>
<div id="addAnimate1" class="button">Add animate1</div>
<div id="removeAnimate2" class="button">Remove animate2</div>
<div id="addAnimate2" class="button">Add animate2</div>
<div id="block" class="animate2"></div>

CSS

.button {
    cursor:pointer;
    padding:4px 12px;
    border:1px solid gray;
    display:inline-block;
}
#block {
    position: absolute;
    top: 50px;
    width: 100px;
    height: 100px;
    background: url('http://placekitten.com/g/400/200');
    background-size:cover;
    background-position: 35% 50%;
    border-radius:50%;
}
.animate1 {
    -webkit-animation: shift 1s ease-in-out forwards;
}
.animate2 {
    -webkit-animation: shift 1s ease-in-out backwards reverse;
}
@-webkit-keyframes shift {
    from {
        left: 0px;
    }
    to {
        left: 200px;
    }
}

JavaScript

setTimeout(function () {
    $('#block').removeClass('animate2').addClass('animate1');
}, 2000);
$('#removeAnimate1').click(function () {
    $('#block').removeClass('animate1');
});
$('#addAnimate1').click(function () {
    $('#block').addClass('animate1');
});
$('#removeAnimate2').click(function () {
    $('#block').removeClass('animate2');
});
$('#addAnimate2').click(function () {
    $('#block').addClass('animate2');
});