JSFiddle - React, Tailwind, and code Playground

by keif

HTML

<img src="http://images.cutelittlekittens.com/files/images/general/gagebaby2_147.jpg" alt="kitty"/>

CSS

@-webkit-keyframes reset {
0% {
    opacity: 0;
}
100% {
    opacity: 0;
}
}
 
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
img {
        -webkit-animation-name: reset, fade-in;
        -webkit-animation-duration: 2s;
        -webkit-animation-fill-mode: backwards;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-iteration-count: 1;
}