filter:hue-rotateとanimationを組み合わせてみたデモ

色相をグルグル変更します

2012-07-16

画像だけでなく、テキストも色相が一定時間で変わります。

@keyframes huerotate{
	0% {-webkit-filter: hue-rotate(0deg);}
	100% {-webkit-filter: hue-rotate(360deg);}
}
@-webkit-keyframes huerotate{
	0% {-webkit-filter: hue-rotate(0deg);}
	100% {-webkit-filter: hue-rotate(360deg);}
}
@-moz-keyframes huerotate{
	0% {-webkit-filter: hue-rotate(0deg);}
	100% {-webkit-filter: hue-rotate(360deg);}
}
@-ms-keyframes huerotate{
	0% {-webkit-filter: hue-rotate(0deg);}
	100% {-webkit-filter: hue-rotate(360deg);}
}
@-o-keyframes huerotate{
	0% {-webkit-filter: hue-rotate(0deg);}
	100% {-webkit-filter: hue-rotate(360deg);}
}

body{
	animation-name: huerotate;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	-webkit-animation-name: huerotate;
	-webkit-animation-delay: 0s;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: huerotate;
	-moz-animation-delay: 0s;
	-moz-animation-duration: 3s;
	-moz-animation-iteration-count: infinite;
	-ms-animation-name: huerotate;
	-ms-animation-delay: 0s;
	-ms-animation-duration: 3s;
	-ms-animation-iteration-count: infinite;
	-o-animation-name: huerotate;
	-o-animation-delay: 0s;
	-o-animation-duration: 3s;
	-o-animation-iteration-count: infinite;
}