テンプレート:色変化/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;
	}
	1%{
		color:#000000;
	}
	2%{
		color:#ffffff;
	}
	3%{
		color:#000000;
	}
	4%{
		color:#ffffff;
	}
	5%{
		color:#000000;
	}
	6%{
		color:#ffffff;
	}
	7%{
		color:#000000;
	}
	8%{
		color:#ffffff;
	}
	9%{
		color:#000000;
	}
	10%{
		color:#ffffff;
	}
	11%{
		color:#000000;
	}
	12%{
		color:#ffffff;
	}
	13%{
		color:#000000;
	}
	14%{
		color:#ffffff;
	}
	15%{
		color:#000000;
	}
	16%{
		color:#ffffff;
	}
	17%{
		color:#000000;
	}
	18%{
		color:#ffffff;
	}
	19%{
		color:#000000;
	}
	20%{
		color:#ffffff;
	}
	21%{
		color:#000000;
	}
	22%{
		color:#ffffff;
	}
	23%{
		color:#000000;
	}
	24%{
		color:#ffffff;
	}
	25%{
		color:#000000;
	}
	26%{
		color:#ffffff;
	}
	27%{
		color:#000000;
	}
	28%{
		color:#ffffff;
	}
	29%{
		color:#000000;
	}
	30%{
		color:#ffffff;
	}
	31%{
		color:#000000;
	}
	32%{
		color:#ffffff;
	}
	33%{
		color:#000000;
	}
	34%{
		color:#ffffff;
	}
	35%{
		color:#000000;
	}
	36%{
		color:#ffffff;
	}
	37%{
		color:#000000;
	}
	38%{
		color:#ffffff;
	}
	39%{
		color:#000000;
	}
	40%{
		color:#ffffff;
	}
	41%{
		color:#000000;
	}
	42%{
		color:#ffffff;
	}
	43%{
		color:#000000;
	}
	44%{
		color:#ffffff;
	}
	45%{
		color:#000000;
	}
	46%{
		color:#ffffff;
	}
	47%{
		color:#000000;
	}
	48%{
		color:#ffffff;
	}
	49%{
		color:#000000;
	}
	50%{
		color:#ffffff;
	}
	51%{
		color:#000000;
	}
	52%{
		color:#ffffff;
	}
	53%{
		color:#000000;
	}
	54%{
		color:#ffffff;
	}
	55%{
		color:#000000;
	}
	56%{
		color:#ffffff;
	}
	57%{
		color:#000000;
	}
	58%{
		color:#ffffff;
	}
	59%{
		color:#000000;
	}
	60%{
		color:#ffffff;
	}
	61%{
		color:#000000;
	}
	62%{
		color:#ffffff;
	}
	63%{
		color:#000000;
	}
	64%{
		color:#ffffff;
	}
	65%{
		color:#000000;
	}
	66%{
		color:#ffffff;
	}
	67%{
		color:#000000;
	}
	68%{
		color:#ffffff;
	}
	69%{
		color:#000000;
	}
	70%{
		color:#ffffff;
	}
	71%{
		color:#000000;
	}
	72%{
		color:#ffffff;
	}
	73%{
		color:#000000;
	}
	74%{
		color:#ffffff;
	}
	75%{
		color:#000000;
	}
	76%{
		color:#ffffff;
	}
	77%{
		color:#000000;
	}
	78%{
		color:#ffffff;
	}
	79%{
		color:#000000;
	}
	80%{
		color:#ffffff;
	}
	81%{
		color:#ffffff;
	}
	82%{
		color:#000000;
	}
	83%{
		color:#ffffff;
	}
	84%{
		color:#000000;
	}
	85%{
		color:#ffffff;
	}
	86%{
		color:#000000;
	}
	87%{
		color:#ffffff;
	}
	88%{
		color:#000000;
	}
	89%{
		color:#000000;
	}
	90%{
		color:#ffffff;
	}
	91%{
		color:#000000;
	}
	92%{
		color:#ffffff;
	}
	93%{
		color:#000000;
	}
	94%{
		color:#ffffff;
	}
	95%{
		color:#000000;
	}
	96%{
		color:#ffffff;
	}
	97%{
		color:#000000;
	}
	98%{
		color:#ffffff;
	}
	99%{
		color:#000000;
	}
	100%{
		color:#ffffff;
	}
}
@keyframes k5{
	0%{
		color:#ffff00;
		background-color:#000000
	}
	50%{
		color:#ffff00;
		background-color:#000000
	}
	51%{
		color:#000000;
		background-color:#ffff00;
	}
	100%{
		color:#000000;
		background-color:#ffff00
	}
}
.a1{
	animation-name:k1;
	animation-duration:4s;
	animation-iteration-count:infinite;
}
.a2{
	animation-name:k2;
	animation-duration:3s;
	animation-iteration-count:1;
}
.a3{
	animation-name:k3;
	animation-duration:4s;
	animation-iteration-count:infinite;
}
.a4{
	animation-name:k4;
	animation-duration:10s;
	animation-iteration-count:infinite
}
.a5{
	animation-name:k5;
	animation-duration:250ms;
	animation-iteration-count:infinite;
}