テンプレート:色変化/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)}
  17% {background: linear-gradient(90deg, orange, yellow, green, blue, purple, red)}
  34% {background: linear-gradient(90deg, yellow, green, blue, purple, red, orange)}
  51% {background: linear-gradient(90deg, green, blue, purple, red, orange, yellow)}
  68% {background: linear-gradient(90deg, blue, purple, red, orange, yellow, green)}
  85% {background: linear-gradient(90deg, purple, red, orange, yellow, green, blue)}
  100% {background: linear-gradient(90deg, red, orange, yellow, green, blue, purple)}
}
@keyframes k9-2 {
  0% {background: linear-gradient(90deg, yellow, tomato, tomato, maroon, maroon, maroon)}
  17% {background: linear-gradient(90deg, maroon, maroon, maroon, tomato, tomato, yellow)}
  34% {background: linear-gradient(90deg, maroon, maroon, tomato, tomato, yellow, tomato)}
  51% {background: linear-gradient(90deg, maroon, tomato, tomato, yellow, tomato, tomato)}
  68% {background: linear-gradient(90deg, tomato, tomato, yellow, tomato, tomato, maroon)}
  85% {background: linear-gradient(90deg, tomato, yellow, tomato, tomato, maroon, maroon)}
  100% {background: linear-gradient(90deg, yellow, tomato, tomato, maroon, maroon, maroon)}
}
@keyframes k10 {
  0% {color:red}
  20% {color:orange}
  40% {color:yellow}
  60% {color:green}
  80% {color:blue}
  100% {color:purple}
}
.chameleon{
	animation:k1 4s infinite;
}
.chameleon2{
	animation:k10 5s linear infinite alternate;
}
.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 0.3s linear infinite normal;
}
.patrol {
  color:white;
  font-weight:bold;
  animation: k9-2 0.3s linear infinite normal;
}