戻るホーム次へ

複数の背景色を変化させるアニメーション

<!DOCTYPE html>
<html>
<head>
<style> 
div#multi{
	width:100px;
	height:100px;
	background:red;
	animation:mysecond 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes mysecond{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-webkit-keyframes mysecond{ /* Safari and Chrome */
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}
</style>
</head>
<body>
<h3>複数の背景色を変化させるアニメーション</h3>
<div id="multi"></div>
</body>
</html>