Fluid bars resize animation

by marakoss

HTML

<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

CSS

.flex {
	display: flex;
	width: 500px;
	border: 10px solid green;
}

.item {
	display: block;
	min-width: 15%;
	margin: auto;
	padding: 0 auto;
	height: 100px;
	padding: 1px 0;
	background: red;
	transition: all 0.1s linear;
}

.item:nth-child(2n){
	background: blue;
}

.item:hover{
	min-width: 30%;
}

.ono {
	animation: test 1s 100;
}

@keyframes test {
	0% {
		width: 10vw;
	}
	50% {
		width: 25vw;
	}
	100% {
		width: 10vw;
	}
}