IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

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

Photo by Paweł Czerwiński on Unsplash

Photo by Paweł Czerwiński on Unsplash

 

 

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

 

見本

Rainbow HTML CSS JS

Sample Rainbow

<p class="sample" style="color: #ff5353 !important;">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;}
}

 

説明

 

 

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

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

animation:rainbow 3s infinite;

 

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