JSFiddle - React, Tailwind, and code Playground

by Researcher

HTML

<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.min.js"></script>
<div class="example"> <span><img src="https://cdn1.iconfinder.com/data/icons/black-logistics-icons/40/Dotted_left_arrow.png" alt=""/></span>

    <br/> <span><img src="https://cdn1.iconfinder.com/data/icons/black-logistics-icons/48/Dotted_up_arrow.png" alt=""/></span>

    <br/> <span><img src="https://cdn1.iconfinder.com/data/icons/black-logistics-icons/48/Dotted_down-left_arrow.png" alt=""/></span>

    <br/>
</div>

CSS

.example {
    text-align: center;
    font-size: 1.5em;
}
.example span {
    display: inline-block;
    position: relative;
    margin: 0.5em;
    width: 2em;
    height: 2em;
    text-align: center;
    color: white;
    opacity: 0;
}

JavaScript

$('.example span').repeat().each($).animate({
    opacity: 1

}, 400,
$).animate({
    opacity: 0

}, 400)