テンプレート:色変化/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
	}
}
@keyframes k8{
	0%{
		color:#ff0000;
		background-color:#ffff00
	}
	50%{
		color:#ff0000;
		background-color:#ffff00
	}
	51%{
		color:#ffff00;
		background-color:#ff0000;
	}
	100%{
		color:#ffff00;
		background-color:#ff0000
	}
}
@keyframes k9 {
  0% {background: linear-gradient(90deg, red, orange, yellow, green, blue, purple)}
  20% {background: linear-gradient(90deg, orange, yellow, green, blue, purple, red)}
  40% {background: linear-gradient(90deg, yellow, green, blue, purple, red, orange)}
  60% {background: linear-gradient(90deg, green, blue, purple, red, orange, yellow)}
  80% {background: linear-gradient(90deg, blue, purple, red, orange, yellow, green)}
  100% {background: linear-gradient(90deg, purple, red, orange, yellow, green, blue)}
}
.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;
}
.caution2b{
	font-weight:bold;
	animation:k8 500ms infinite;
}
.grainbow {
  color:white;
  font-weight:bold;
  animation: k9 .4s linear infinite normal;
}