テンプレート:色変化/style.css

@keyframes k1{
	0%{
		color:#ff0000;
	}
	10%{
		color:#007fff;
	}
	20%{
		color:#ff00ff;
	}
	30%{
		color:#00ff00;
	}
	40%{
		color:#ff007f;
	}
	50%{
		color:#7f00ff;
	}
	60%{
		color:#ff7f00;
	}
	70%{
		color:#ff007f;
	}
	80%{
		color:#0000ff;
	}
	90%{
		color:#7fff00;
	}
	100%{
		color:#00ff7f;
	}
}
@keyframes k2{
	from{
		color:#ffffff;
	}
	to{
		color:#000000;
	}
}
@keyframes k3{
	0%{
		color:#ffffff;
	}
	50%{
		color:#000000;
	}
	100%{
		color:#ffffff;
	}
}
@keyframes k4{
	0%{
		color:#ffffff;
	}
	50%{
		color:#ffffff;
	}
	51%{
		color:#000000;
	}
	100%{
		color:#000000;
	}
}
@keyframes k5{
	0%{
		color:#000000;
	}
	50%{
		color:#000000;
	}
	51%{
		color:#ffffff;
	}
	100%{
		color:#ffffff;
	}
}
@keyframes k6{
	0%{
		color:#ffff00;
		background-color:#000000
	}
	50%{
		color:#ffff00;
		background-color:#000000
	}
	51%{
		color:#000000;
		background-color:#ffff00;
	}
	100%{
		color:#000000;
		background-color:#ffff00
	}
}
@keyframes k7{
	0%{
		color:#ffff00;
		background-color:#ff0000
	}
	50%{
		color:#ffff00;
		background-color:#ff0000
	}
	51%{
		color:#ff0000;
		background-color:#ffff00;
	}
	100%{
		color:#ff0000;
		background-color:#ffff00
	}
}
.chameleon{
	animation:k1 4s infinite;
}
.apearing{
	animation:k2 4s 1;
}
.ap-and-disap{
	animation:k3 4s infinite;
}
.flashing{
	animation:k4 500ms infinite;
}
.flashing-reverse{
	animation:k5 500ms infinite;
}
.caution{
	font-weight:bold;
	animation:k6 500ms infinite;
}
.caution2{
	font-weight:bold;
	animation:k7 500ms infinite;
}