虹色に色が変わるアニメーションスタイルの設定 | animation | CSS | HTML

Photo by Paweł Czerwiński on Unsplash

HTMLで虹色に色が変わるアニメーションスタイルを設定する方法です。

見本

Rainbow HTML CSS JS

Sample Rainbow

<p class="sample" style="color: #ff5353;">Sample Rainbow</p>

.sample{
    font-size: 150%;
    font-weight:600;
    animation:rainbow 3s infinite;
    -webkit-animation:rainbow 3s infinite;
}
@keyframes rainbow{
    12%{color:#ff5353;}
    24%{color:#ffcf53;}
    36%{color:#e8ff53;}
    48%{color:#53ff5d;}
    60%{color:#53ffbc;}
    72%{color:#5393ff;}
    84%{color:#ca53ff;}
    100%{color:#ff53bd;}
}
@-webkit-keyframes rainbow{
    12%{color:#ff5353;}
    24%{color:#ffcf53;}
    36%{color:#e8ff53;}
    48%{color:#53ff5d;}
    60%{color:#53ffbc;}
    72%{color:#5393ff;}
    84%{color:#ca53ff;}
    100%{color:#ff53bd;}
}

 

虹色アニメーションの作成方法

アニメーションスタイルを設定するにはまず、アニメーションを作成する必要があります。今回は、記事タイトルにあるように虹色に色が変わるアニメーションの作成をします。

@keyframes規則を使用することでアニメーションを作成することができます。

@keyframes rainbow{
    12%{color:#ff5353;}
    24%{color:#ffcf53;}
    36%{color:#e8ff53;}
    48%{color:#53ff5d;}
    60%{color:#53ffbc;}
    72%{color:#5393ff;}
    84%{color:#ca53ff;}
    100%{color:#ff53bd;}
}

Copy

説明

• @keyframes [ 名前 ]{ [ 作動するタイミング ]{ スタイル } }

• @keyframes rainbow内に記入されているスタイルは文字色を変えるスタイルです。 
• @keyframes規則についての詳細は「@keyframes - CSS: カスケーディングスタイルシート | MDN」をご覧ください。

アニメーションスタイルの適用方法

作成したアニメーションを適用する方法は簡単です。animationプロパティを使用することで適用することができます。

animation:rainbow 3s infinite;

Copy

説明

• animation:[ keyframesの名前 ]  [ アニメーションの時間 ]  [ アニメーションの繰り返し回数 ]

• infiniteは無限に再生を繰り返すときに使用します。
• アニメーションの操作は他にもあります。詳細は「animation - CSS: カスケーディングスタイルシート | MDN」をご覧ください。