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

この記事でできること

トップぺージの最初に表示させている新着記事に、

新着記事と分かるように＼New／の見出しを表示
さらに点滅させる
HTML/CSSの使い方を覚える

ここを解説

と思いカスタマイズを行いました。

HTMLの<blink>タグは廃止されましたが、CSSのアニメーションを使って点滅を実装することができます。

動作イメージ
1. DEMO
文字を点滅させるためのコード
1. HTMLはこちら
  1. HTMLの補足
    1. タグについて
    2. クラスについて
2. CSSはこちら
  1. CSS／アニメーション
    1. １. animationのプロパティ
    2. ２. @keyframesについて
点滅させたいとき
参考にさせていただいたサイト

動作イメージ

DEMO

こんな感じにゆっくりなめらかに点滅するイメージです

See the Pen 文字を点滅させる by はっちゃん (@hacchan) on CodePen.

文字を点滅させるためのコード

HTMLはこちら

記事作成画面（HTMLモード）で入力します。

<h2 class="blink">＼NEW／</h2>

HTMLの補足

点滅させる文字を<タグ>で囲みます
<タグ>にクラス（class=”blink”）を指定しておきます（後述のCSSでアニメーションを設定するために使います）

タグについて

<h2></h2>の部分（タグといいます）はここでは見出しにするために<h2>を使っていますが、用途に合わせて<div><p><span>など使い分けてください。

よく使うタグを覚えておくと便利！

タグ	特徴・使い方
<div>	division（仕切り）汎用ブロック要素。前後に改行が入ります。ひとつのまとまりとして考えます。
<p>	paragragh（段落）ブロック要素。前後に改行が入ります。段落を指定する時に使います。
<span>	汎用インライン要素。前後に改行が入りません。文字の部分的な装飾などに使います。

例：<div>テキスト</div>

このように閉じタグをつけて文字を囲みます。

クラスについて

CSSで記述する内容をHTMLのどの部分（要素）に反映させるかを指示するものです。

書き方（例）

HTMLでタグ内にclass=“クラス名”と記述（classの前には半角スペースを入れて区切ります。）

<div class=”class1″>クラスの書き方の例</div>

.class1 {ここにスタイルを記述}

CSSでは、指定したいクラス名を .（半角ドット）を前に付けて記述します。

クラス名は自分で分かりやすいように任意に決めることができます。（半角英数字、記号はハイフン（ｰ）とアンダーバー（_）のみ使用可）

CSSはこちら

先ほど指定したクラスを記述（.blink）し、点滅させるためのCSSがこちらになります。

/* 点滅 */
.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}
 
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

このコードをコピペし、プレビューで点滅するのが確認できたらこれで完成です！！お疲れさまでした。

ここから先は「どうして点滅するの？」と仕組みが少し気になった人へさくっとだけ補足。

CSS／アニメーション

CSSでアニメーションを表現するには2つの設定が必要となります。

animationプロパティ
- 詳細を設定する
@keyframes
- アニメーション開始時の状態と終了時の状態を設定する

１. animationのプロパティ

ここでアニメーションを動かす時間や繰り返しなどの詳細を設定していきます。

animation-name　…　アニメーション名（自由に決めてOK、ここで設定した名前を最下段の@keyframesで指定する）
animation-duration　…　アニメーション1回分の時間の長さ（初期値は「0」、単位は「秒(s)」または「ミリ秒（ms）」で指定します）
animation-timing-function　…　アニメーションの動き方（初期値は「ease」：開始と終了を滑らかに）
animation-delay　…　アニメーションの開始時間（初期値は「0」）
animation-iteration-count　…　繰り返す回数（初期値は「1」）
animation-direction　…　反転再生するかどうか（初期値は「normal」）

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

まとめるとコードも短くなりすっきりするね！

今回のコードでは、

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

開始から終了までの時間は1秒
ゆっくり変化させる
無限に繰り返す

こういったことを設定しています。

２. @keyframesについて

@keyframesはアニメーションの開始から終了までに、どのような動きをさせるのかを指定します。

@keyframesのあとにanimationプロパティで指定した任意の名前を書くことによって紐付けます。

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

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

0%がアニメーション開始時
- opacity: 0（要素は透明）
100%がアニメーション終了時
- opacity: 1（要素は不透明）

opacity は CSS のプロパティで、要素の透過度を設定します。（0～1の範囲で0.1などの小数点を使って指定可能）

点滅させたいとき

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

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

と思ったときに記事作成画面（HTMLモード）でこのコードを追加するだけでいつでもどこでもピカピカ^^

<span class="blink">ここを点滅させたいな！</span>

point

文章の途中で改行しないで一部分だけ指定するときは<span></span>タグで囲みます。

点滅を多用するとうるさくなってしまうので特に目立たせたい部分に！コピペで簡単なのでやってみてください♪

参考にさせていただいたサイト

今回、参考にさせていただいたのはこちらのサイト。コードも公開されています。

【HTML】blinkタグは使用禁止！その理由とCSSで簡単に点滅させる方法

「blinkタグ」と「text-decoration: blink;」は廃止されたため、点滅しません。CSSの「animation」とjQueryを使って同じ動きを再現できます。おしゃれな点滅するボタンの作り方もご紹介しています。