More than 3 years have passed since last update.

【CSS】「CSSチョットデキル」に、CSSだけで虹色に光るアニメーションをつけてみた

Last updated at 2021-04-15Posted at 2021-04-15

概要

ネタです
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 になります。

参考記事

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up