概要
ネタです
CSSのanimation, keyframesのみで文字を虹色に光らせる
とりあえずコード
See the Pen
CSS チョットデキル by Shiba (@shiba_gsgs)
on CodePen.
重要なのはanimationと@keyframesです。
animation
animation: rainbow 3s infinite;
使う@keyframesの名前、アニメーション開始～終了までの秒数を指定しています。
infiniteをつけると無限にアニメーションを繰り返すようになります。
＠keyframes
@keyframes rainbow{
0%{color:#ff0053;}
12%{color:#ff5353;}
24%{color:#ffcf53;}
36%{color:#e8ff53;}
48%{color:#53ff5d;}
60%{color:#53ffbc;}
72%{color:#5393ff;}
84%{color:#ca53ff;}
100%{color:#ff53bd;}
}
開始時には#ff0053 、ほかの色を経由して終了時には #ff53bd になります。
参考記事
https://developer.mozilla.org/ja/docs/Web/CSS/animation
https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes
https://qiita.com/7968/items/1d999354e00db53bcbd8
↧
