JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div id="container">
    <h1>Select a photo...</h1>
</div>

CSS

@-webkit-keyframes flyin {
 from {
    opacity: 0;
    -webkit-transform: scale(0.5);
 }
 to {
    opacity: 10;
    -webkit-transform: scale(1);
 }
}

h1 {
    font: 24px normal Helvetica, sans-serif;
    color: #444;
    line-height: 10px;
    padding-top: 5px;
}

div#container {
    padding: 25px;
    width: 700px;
    overflow: hidden;
}

div.flyin {
    cursor: pointer;
    float: left;
    background: #eee;
    border: 1px solid #ccc;
    margin: 25px 25px 0px 0px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
    width: 145px;
    height: 145px;
    -webkit-animation-name: flyin;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
}

div.flyin:hover {
    background: #fff;
}

JavaScript

var c = $('#container'), i = 0, t;
t = window.setInterval(function(){
    if (i++ > 10) window.clearInterval(t);
    c.append('<div class="flyin" />');
}, 300);