テンプレート:色変化/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
}
}
.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;
}