JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<div class="photobanner circle-down">
    <div class="spinner">
        <img class="move" src="http://storyacious.com/wp-content/uploads/2014/02/300x300.gif"/>
    </div>
    <div class="spinner">
        <img class="move" src="http://storyacious.com/wp-content/uploads/2014/02/300x300.gif"/>
    </div>
    <div class="spinner">
        <img class="move" src="http://storyacious.com/wp-content/uploads/2014/02/300x300.gif"/>
    </div>
</div>

CSS

.circle-down {
    margin-top: 5em;
}

.photobanner {
    height: 388px;
    width: 100%;
}
.move {
    -webkit-animation: bannermove 30s linear infinite;
    -moz-animation: bannermove 30s linear infinite;
    -ms-animation: bannermove 30s linear infinite;
    -o-animation: bannermove 30s linear infinite;
    animation: bannermove 30s linear infinite;
    display: inline;
}
.move:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    cursor: pointer;
    -webkit-box-shadow: 0 0 10px 5px #cb0c2e !important;
    -moz-box-shadow: 0 0 10px 5px #000000 !important;
    box-shadow: 0 0 10px 5px #cb0c2e !important;
}
.spinner {
    -webkit-animation: bannerscale 30s linear infinite;
    -moz-animation: bannerscale 30s linear infinite;
    -ms-animation: bannerscale 30s linear infinite;
    -o-animation: bannerscale 30s linear infinite;
    animation: bannerscale 30s linear infinite;
}
.spinner:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes bannermove {
    0% {transform: translateX(350%);}
    50% {transform: translateX(-100%);}
    100% {transform: translateX(-550%);}
}
@-moz-keyframes bannermove {
    0% {transform: translateX(0);}
    50% {transform: translateX(-100%);}
    100% {transform: translateX(-200%);}
}
@-webkit-keyframes bannermove {
    0% {transform: translateX(350%);}
    50% {transform: translateX(-100%);}
    100% {transform: translateX(-550%);}
}
@-ms-keyframes bannermove {
    0% {transform: translateX(0);}
    100% {transform: translateX(-200%);}
}
@-o-keyframes bannermove {
    0% {transform: translateX(0);}
    100% {transform: translateX(-200%);}
}

@keyframes...

JavaScript

$(document).ready(function() {
    $(".spinner").hide().each ( function(i) {
        $(this).delay(i*1500).fadeIn(1);
    });
});