CSSを使って、要素を点滅させる方法を紹介します。
ネット検索すると、フェードする点滅が紹介されている記事ばかりヒットしますが、そうじゃない！
完全にONとOFFみたいな、チカチカと切り替わるような表現をする方法です。
こちらのコードでいけるかと思います。参考にどうぞ。
.element {
animation: tikatika 1s step-end infinite;
}
@keyframes tikatika {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}これは一例なので、他の書き方もありますが目的の点滅は表現できるかと思います。keyframesの0%と100%を省略して50%だけでもいけるかな？一応丁寧に書いてみました。
CSSで要素を点滅させる方法について
詳細を解説します。
「.element」と「tikatika」は任意です。.elementは点滅させたい要素、tikatikaはアニメーションの名前を適当に設定します。
ポイントは、animationの「step-end」です。
このプロパティはanimation-timing-functionの仲間で、steps(1)を指定したときと同じふるまいをします。
steps(○)というのは、アニメーションの全体を○段階に区切ることができる設定で、パラパラ漫画のようなカクカクしたアニメーションを演出するときなどに活躍します。
今回はそれを１ステップを挟んでアニメーションの終了まで行くという意味の設定で「steps(1)」としています。アニメーション全体の50％のところでopacityを0としていしているため、ちょうどこの途中ステップと重なるという理解です。
steps(1)というのは、正確にはsteps(1, end)の略で、別の指定としてはsteps(1, start)があります。
このsteps()関数については深く触れませんが、本主題での使い分けとしては、画面を表示した瞬間、つまりアニメーションの開始時にopacityが1であってほしい場合はsteps(1, end)つまりstep-end。
一方、アニメーション開始時にすぐステップを踏みに行きたい場合はsteps(1, start)つまりstep-startを指定します。この場合アニメーション開始時にopacityが0であるような見え方をします。
上記のサンプルのstep-endをstep-startに変えてもほぼ同じに見えます。
この例のように１秒間隔で繰り返すようなアニメーションでは、正直一瞬の出来事なのでどちらでも問題ないですが、目的によっては使い分けも必要となりますので参考になればと思います。
まとめ
CSSで要素を点滅させる方法を紹介してみました。点滅っていうと個人的にはこの動きなのですが、一般的にはフェードが伴うものなのでしょうかね・・・
素敵なWeb製作の参考になれば幸いです♪
