CSSでなめらかに点滅させる方法（コピペＯＫ）

この記事では、CSSを使って要素をなめらかに点滅させる方法を紹介します。

ウェブデザインで使うアニメーションの中でも、要素を点滅させる効果は注目を引きたい時に便利です。当サイトの場合、トップページに表示した検索フォーム上の文字を点滅させるためにこのカスタマイズを導入しています。

このように文字を点滅させたい方は読み進めてくださいね。

点滅の実装方法

1. スタイルシートにCSSを記述する
2. HTML要素にクラスを追加する

当カスタマイズではCSSを使用します。

テーマは関係なく使えますが、Cocoonでの編集方法についてはこちらをご確認の上作業をおこなってください。基本的に子テーマのスタイルシートを使用します。

点滅するために必要なCSS

下記、CSSをスタイルシートに記述します。

このコードは、@keyframesを使用してアニメーションを定義して要素に適用します。ここでは「blink」という任意のクラス名をつけています。

/* 点滅 */
@keyframes blinking {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* 要素にアニメーションを適用 */
.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}

HTML要素にクラスを追加する

点滅させたいHTML要素にクラス（ここではblink）を追加します。クラスを追加する方法は２通りあります。

①ブロックエディタの「追加CSSクラス」に入力する

簡単なのが、ブロックエディタの「追加CSSクラス」に入力する方法。

点滅させる要素（ブロック）を選択し、右側サイドメニューの、高度な設定→「追加CSSクラス」にクラスを入力します。今回の例では「blink」と入力。

②HTMLコードを直接入力する

もうひとつは、直接HTMLを記述する方法。

• 投稿編集画面でブロックメニューから「カスタムHTML」を選択する
• 点滅させたい要素にクラスを追加

例えば、段落の場合は以下のようにHTMLを記述します。

<p class="blink">この部分の文字を点滅</p>

プレビューで点滅するのが確認できたら、記事を保存して完成です！お疲れさまでした。

点滅する仕組み／CSSアニメーションの設定

CSSを使って要素をなめらかに点滅させるには、@keyframesでアニメーションを定義し、それを特定のクラスに適用することで実現できます。2つの設定が必要です。

@keyframesについて

@keyframesはアニメーションの開始から終了までに、どのような動きをさせるのかを指定します。@keyframesのあとに任意の名前（この例ではblinking）を書き、animationプロパティに紐付けます。

アニメーションの開始を「0%」、終了を「100%」とした場合のプロパティの変化を下記のように記載します。

@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

• 0% {opacity: 0;}
  • アニメーションの開始時点（0%）で要素の透明度（opacity）を0に設定します。これは完全に透明な状態を意味します。
• 100% {opacity: 1;}
  • アニメーションの終了時点（100%）で要素の透明度を1に設定します。これは完全に不透明な状態を意味します。

animationプロパティ

ここでアニメーションを動かす時間や繰り返しなどの詳細を設定し、要素にアニメーションを適用します。

これらのプロパティをひとつずつ書いてもよいですが、animationプロパティを使うとまとめて下記のように表記できます。

今回の点滅アニメーションの例

今回の点滅アニメーションの例でも、animationプロパティで短くまとめています。

.blink {
    animation-name: blinking; /*アニメーション名*/
    animation-duration: 1s; /*アニメーション1回分の時間の長さ*/
    animation-timing-function: ease-in-out;/*アニメーションの動き方*/
    animation-delay: 0s;/*アニメーションの開始時間*/
    animation-iteration-count: infinite;/*繰り返す回数*/
    animation-direction: alternate;/*反転再生するかどうか*/
}

.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}

このコード全体では、.blinkクラスが適用された要素が1秒かけて透明から不透明に変わり、その後また1秒かけて不透明から透明に戻るアニメーションが無限に繰り返されます。このアニメーションは滑らかに変化し、始まりと終わりがゆっくりになるように設定されています。

アニメーションの速度を調整して、理想的な点滅効果を見つけてください。

CSSアニメーションの基本的な指定方法について、こちらの記事に詳しくまとめました！

部分的に点滅させたいとき

段落全体の他に、文章の途中で部分的な指定もできます。

一度CSSを設定しておくと、

例えば、ここを点滅させたいな！

と思ったときに投稿編集画面（カスタムHTML）でこのコードを追加するだけでいつでもどこでもピカピカ。文章の途中で改行しないで一部分だけ指定するときは<span></span>タグで囲みます。

<p>例えば、<span class="blink">ここを点滅させたいな！</span></p>

文字の他に画像も点滅できます

まったく同じ要領で、画像も点滅します。

画像を点滅させる状況はあまりないかもしれませんが、参考までに載せておきますね。

まとめ／点滅はピンポイントに使いましょう

CSSで文字を点滅させる方法について解説しました。

今回紹介したコードをコピペしてお試しください。点滅を多用するとうるさくなってしまうので、特に目立たせたい部分にピンポイントで使うことをおすすめします。