.tile {
    background-image: url('/img/peter-square.jpg');
    background-size: 300px;
    height: 75px;
    width: 75px;
    display: inline-block;
}

#tileContainer {
    width: 300px;
    height: 300px;
    display: inline-flex;
    flex-flow: wrap;
    cursor: pointer;
}

.appear {
    animation-name: appear;
    animation-duration: 3.5s;
}

@keyframes appear {
    0% {
        transform: scale(0);
    }

    99% {
        transform: scale(1);
    }

    100% {
        transform: none;
    }

}

.drain {
    animation-name: drain;
    animation-duration: .5s;
}

@keyframes drain {
    from {
        transform: rotate(0) scale(1);
    }
    to {
        transform: rotate(3600deg) scale(0);
    }

}