JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<ul>
	<li>one</li>
	<li>two</li>
	<li>three</li>
	<li>four</li>
	<li>five</li>
</ul>

SCSS

@for $i from 1 to 20{
	li:nth-child(#{$i}){
		transition-delay: 0.2s - 0.05s*($i - 1);
	
		ul:hover &{
			transition-delay: 0.05s*($i - 1);
		}
	}
}

ul{
	display: block;
	margin: 0;
	padding: 0;
	width: 50px;
	background: #fff;
	overflow: hidden;
}

li{
	display: block;
	width: 50px;
	margin-left: 50px;
	transition: margin 0.15s ease-in-out;
	height: 50px;
	background: #3f9;
}

ul:hover li{
	margin-left: 0;
}