JSFiddle - React, Tailwind, and code Playground

by yakun chen

HTML

<div>鼠标移动到我这里，查看动画效果</div>

CSS

@keyframes changeColor{
		0%{
			background: #675AB3;
		}
		20%{
			background:#C1E8FF;
		}
		40%{
			background:#A48992;
		}
		60%{
			background:#FFF900;
		}
		80%{
			background:#6D87A0;
		}
		100%{
			background: #FFB89A;
		}
	}
		div {
		width: 400px;
		height: 150px;
		background: #E7F0EF;
		color:black;
		margin: 50px auto;
	}
		div:hover {
			animation: changeColor 6s ease-in-out  .2s;
	}