JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<div class="col-xs-12 col-md-2">
    <img src="images/yacht.png" class="img-responsive slideRight" id="yacht" alt="Picture of a Yacht" />
</div>

CSS

.slideRight {
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}
@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    100% {
        transform: translateX(150%);
    }
}
@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    100% {
        -webkit-transform: translateX(150%);
    }
}

JavaScript

$("#yacht").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
    $('#yacht').fadeTo(1000,0);
});