4

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

参考記事

4

Register as a new user and use Qiita more conveniently

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

4