などの疑問や悩みを解決してまいります。
jsを使用せずともHTMLとCSSだけで簡単に点滅アニメーションを作成することができます。
今回はCSSアニメーションで要素を点滅させる方法について解説していきます。
シンプル点滅アニメーション
シンプルな点滅アニメーションです。
特に特徴もないのでコードもシンプルかつコード量もコンパクトです。
See the Pen 点滅アニメーション by koutarou mori (@koutarou-mori) on CodePen.
どのように点滅させているのか、実装コードを解説していきます。
CSSコードの解説
アニメーションに関する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」と指定しています。
animation-durationプロパティでアニメーションの再生時間を指定
今回こちらのシンプルな点滅アニメーションはアニメーションの再生1回につき0.5秒に設定しています。
このアニメーションの再生時間を指定するのがanimation-durationプロパティです。
ここを長い時間に変えることで1回の点滅のスピードがゆっくりなるので、このあとに解説するやんわり点滅アニメーションを実装することもできます。
animation-directionプロパティでアニメーションを反転する
通常アニメーションは一度再生が終わるとアニメーションのスタートするときの状態に戻ります。
今回指定しているalternateはアニメーションを反転してくれます。
つまり最初は順再生で、2回目再生されるときは逆再生するようになります。
他に指定できる値は以下の通りです。
| 値 | 内容 |
|---|---|
| alternate | 毎回反転させ、初回は順方向で2回目は逆方向 |
| reverse | 毎回逆方向に再生 |
| alternate-reverse | 毎回反転させ、初回は逆方向に再生 |
| normal | 毎回順方向に再生（既定値） |
animation-iteration-count: infinite;で繰り返し再生
animation-iteration-count: 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回のアニメーションが長く（遅く）なります。
高速点滅アニメ―ション
あまりおすすめはしませんが、高速で点滅するアニメーションの紹介です。
注意ポイント
過度な動きのアニメーションはユーザビリティにいい影響を与えません。
適切な配置と動きを実装することで視覚的好印象を与えますが、やりすぎるとかえって逆効果ですので気を付けましょう。
See the Pen 高速点滅アニメーション by koutarou mori (@koutarou-mori) on CodePen.
アニメーションの再生時間を短くし、@keyframesの指定を細かく入れる
単純に時間を短くし、繰り返しアニメーションを実行することで高速な動きを見せてくれますが、@keyframesに細かく指定を入れることでさらに時間内に細かい動きをしてくれるので高速アニメーションを再現できています。
本記事のまとめ
ここまで読んでいただきありがとうございました。
本記事のまとめです。
ポイント
animation-nameプロパティでアニメーションに名前を付けるanimation-durationプロパティでアニメーションの再生時間を指定animation-directionプロパティでアニメーションを反転するanimation-iteration-count: infinite;で繰り返し再生@keyframesにはopacityプロパティを指定animation-durationプロパティの値を小さくすることで、ゆっくりとしたアニメーションを実装できる- アニメーションの再生時間を短くし、さらに@keyframesの指定を細かく入れるだけで高速アニメーションを実装できる
先程も解説しましたが、過度なアニメーションはやめましょう。
ユーザーの離脱率につながるなどのサイトにいい影響を及ぼしてくれません。
点滅アニメーションは主に注意をひくためのアニメーションとして使用されるので、点滅するという意味だけでも十分効果があります。
ぜひ、ユーザー目線を意識しつつ点滅アニメーション取り入れてみてください。
