JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<div class="menu-icon"><span></span></div>

SCSS

$size: 32px;

/*div.icon {
	margin: 20px;
	height: $size;
	position: relative;
	&:before,
	&:after {
		background-color: #000;
		content: '';
		display: block;
		height: 2px;
		position: absolute;
		width: $size;
	}
	&:before {
		top: 0;
	}
	&:after {
		bottom: 0;
	}
	span {
		border: 1px solid black;
		border-radius: 100%;
		display: block;
		height: $size;
		max-height: 0;
		position: absolute;
		transition: border-radius 0.25s;
		width: $size;
	}
	&:hover {
		span {
			animation-name: circle;
			animation-duration: 1s;
		}
	}
}*/

@keyframes circle {
	0% {
		width: $size;
	}
	25% {
		border-radius: 3px;
		left: 13px;
		max-height: 0;
		top: 13px;
		width: 0;
	}
	100% {
		border-radius: 100%;
		max-height: $size;
		top: 0;
		width: $size;
	}
}









.menu-icon{
    height: 32px;
    position: relative;
    width: 32px;
	&:before,
	&:after {
		border: 3px solid #000;
		border-radius: 3px;
		content: '';
		display: block;
		height: 0;
		position: absolute;
		width: 32px;
    	transition: all 0.5s;
	}
	&:before {
		top: 3px;
	}
	&:after {
		bottom: 3px;
	}
	&:hover {
		&:before {
			left: 2px;
			top: 15px;
			transform: rotate(225deg);
			width: 28px;
		}
		&:after {
			bottom: 11px;
			left: 2px;
			transform: rotate(-225deg);
			width: 28px;
		}
	}
	span {
		animation-direction: reverse;
		background-color: rgba(0,0,0,0.25);
		border: 3px solid #000;
		border-radius: 3px;
		display: block;
		height: $size;
		left: 0;
		max-height: 0;
		position: absolute;
		top: 13px;
		transition: border-radius 0.25s;
		width: $size;
	}
	&:hover {
		span {
			animation: circle 1s forwards;
		}
	}
}