JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<script src=" //cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

CSS

div {
    border: 1px solid;
    margin: 10px;
    background: red;
    width: 100px;
    height: 50px;
    opacity: 0;
    transition: opacity linear 700ms;
    transition-delay: 700ms;
}
div:first-child, div.go {
    opacity:1;
}

JavaScript

var number = $("div").length,
    def = 700;

$("div").slice(1).each(function () {
    var $this = $(this),
        index = $this.index();
    $this.css("transition-delay", def * index + "ms");
});

$("div:first-child").mouseover(function () {
    $("div:not(:first-child)").addClass("go");
});