JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<ul id="list">
    <li>sample</li>
    <li>sample1</li>
    <li>sample2</li>
    <li>sample3</li>
    <li>sample4</li>
</ul>

CSS

#list {
	margin: 2em auto;
	padding: 0;
	list-style: none;
}
#list li {
  width: 200px;
	height: 50px;
	margin: 10px;
	background: #ccc;
	text-align: center;
	line-height: 50px;
  opacity: 0;
	animation: fade-in 300ms ease-in both;
}

#list li:nth-child(2) {
	animation-delay: 300ms;
}
#list li:nth-child(3) {
	animation-delay: 600ms;
}
#list li:nth-child(4) {
	animation-delay: 900ms;
}
#list li:nth-child(5) {
	animation-delay: 1200ms;
}

@keyframes fade-in {
	0% {
		opacity: 0;
		transform: translate3d(0, -50%, 0) scale(0.8);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}