부들잎의 이것저것

animation gradation 만들기

<!-- index.html -->
<div class="anime"></div>

/* index.css */
.anime{
	height: 100px;
	display: block;
	width: 100%;
	background-image: linear-gradient(to right, #fff98f 0%, #47cf8d 50%, #fff98f 100%,);	
	background-size: 200% auto;
	animation: grdAnime 2s infinite linear;
}

@-webkit-keyframes grdAnime{
	0%{
		background-position: 0 0;
	}
	100%{
		background-position: 200% 0;
	}
}
@keyframes grdAnime{
	0%{
		background-position: 0 0;
	}
	100%{
		background-position: 200% 0;
	}
}