【CSSアニメーション】要素を点滅させる方法を解説します。

今回はCSSアニメーションで要素を点滅させる方法について解説していきます。点滅アニメーションは正しく使うことができればユーザーに見せたい情報に視覚的誘導できるなどの利点があります。実装自体はとても簡単なのでぜひこの記事で点滅アニメーションを取り入れてみてください。

See the Pen 点滅アニメーション by koutarou mori (@koutarou-mori) on CodePen.

コード量も少ないですね. ！これだけシンプルな点滅アニメーションだと超簡単に作れちゃいます！ CSSコードの解説 .circle < background-color: rgb(255, 15, 71); border-radius: 50%; width: 200px; height: 200px; /*animationプロパティここから*/ animation-name: tenmetsu; animation-duration: .5s; animation-direction: alternate; animation-iteration-count: infinite; >@keyframes tenmetsu < 0% < opacity: 1; >100% < opacity: 0; >> animation-nameプロパティでアニメーションに名前を付ける

CSSアニメーションを実装するためにアニメーションに名前を付けなくてはいけません。

アニメーションに名前を付けるには animation-name プロパティを使用します。

今回はわかりやすく「tenmetsu」と指定しています。

ここは自分のわかりやすい名前でOKです。 animation-durationプロパティでアニメーションの再生時間を指定

このアニメーションの再生時間を指定するのが animation-duration プロパティです。

ここを長い時間に変えることで 1回の点滅のスピードがゆっくりなるので、このあとに解説するやんわり点滅アニメーションを実装することもできます。

animation-directionプロパティでアニメーションを反転する

今回指定している alternate はアニメーションを反転してくれます。

つまり最初は順再生で、 2回目再生されるときは逆再生するようになります。

移動するアニメーションに指定すると、往復する動きになります！値内容alternate毎回反転させ、初回は順方向で2回目は逆方向reverse毎回逆方向に再生alternate-reverse毎回反転させ、初回は逆方向に再生normal毎回順方向に再生（既定値） animation-iteration-count: infinite;で繰り返し再生

animation-iteration-count: infinite; はアニメーションを繰り返し再生してくれるプロパティです。

infiniteは「無限」を意味するので覚えやすいですね！ @keyframeにはopacityプロパティを指定

opacity プロパティは要素の透明度を指定します。

0は透明で、1に近づくほど透明度が低くなっていき、1だとはっきり表示されます。（1は初期値）

これを使用してアニメーション開始時は opacity: 1; で要素を表示させた状態にして、アニメーション終了と同時に透明になっていき終了時には完全透明になり見えなくなります。

これを繰り返すことで点滅しているように見せています。

以上が点滅アニメーションの実装方法でした。次は少し違う種類の点滅の実装方法を解説します。

やんわり点滅アニメーション

See the Pen 点滅アニメーション by koutarou mori (@koutarou-mori) on CodePen.

animation-durationプロパティの値を小さくする

やんわりした感じは animation-duration プロパティで再生時間を長くしてあげることで1回のアニメーションが長く（遅く）なります。

高速点滅アニメ―ション

なぜおすすめしないのですか？見ていると目がチカチカしてきませんか？チカチカする上に目が疲れてきます・・・過度なアニメーションは逆にユーザーに悪影響を与えてしまうので気を付けて実装しましょう。

過度な動きのアニメーションはユーザビリティにいい影響を与えません。適切な配置と動きを実装することで視覚的好印象を与えますが、やりすぎるとかえって逆効果ですので気を付けましょう。

アニメーションの再生時間を短くし、@keyframesの指定を細かく入れる

単純に時間を短くし、繰り返しアニメーションを実行することで高速な動きを見せてくれますが、 @keyframes に細かく指定を入れることでさらに時間内に細かい動きをしてくれるので高速アニメーションを再現できています。

本記事のまとめ

animation-name プロパティでアニメーションに名前を付ける
animation-duration プロパティでアニメーションの再生時間を指定
animation-direction プロパティでアニメーションを反転する
animation-iteration-count: infinite; で繰り返し再生
@keyframes には opacity プロパティを指定
animation-duration プロパティの値を小さくすることで、ゆっくりとしたアニメーションを実装できる
アニメーションの再生時間を短くし、さらに @keyframesの指定を細かく入れるだけで高速アニメーションを実装できる

先程も解説しましたが、 過度なアニメーションはやめましょう。

関連記事【jQuery、アニメーション】上下左右からフェードインで要素を表示させる方法を解説。【検証ツールの使い方】レスポンシブデザインを確認する方法を解説します。【CSSアニメーション】時間差でフェードインさせる方法を解説【WordPress】wp-env環境でSQLファイルをエクスポート、インポートする方法【Vue.js】v-onディレクティブについて解説します。

1 シンプル点滅アニメーション
- 1.1 CSSコードの解説
- 2.1 animation-durationプロパティの値を小さくする
- 3.1 アニメーションの再生時間を短くし、@keyframesの指定を細かく入れる
© 2026 30歳で異業種からIT企業に転職しました。｜Mitsuta's Tech Blog