こんにちは、「ふ」です。
CSSアニメーション基本、第3回目からはanimationに関するプロパティについて、詳しく見ていきましょう。
CSSアニメーションの設定に使うプロパティは以下の8つです。
・とりあえず必要系:
① animation-name
② animation-iteration-count
③ animation-duration
・遅れ系:
④ animation-delay
・進捗を操作:
⑤ animation-timing-function
・方向系:
⑥ animation-fill-mode
⑦ animation-direction
・Js絡み:
⑧ animation-play-state
今回はこの中から「とりあえず必要系」の3つのプロパティについて。
また、各種プロパティを一括で指定できるショートハンドの使い方についても紹介します。
CSSアニメーションの基本、過去記事はこちら⬆︎。
CSSアニメーション基本の第1回でもお伝えしましたが、とりあえずアニメーションさせるために必要なプロパティが、
① animation-name
② animation-duration
③ animation-iteration-count
の3つです。
animation-nameは、セレクタ外部に記述するキーフレームと紐づけるために指定するプロパティです。
animation-nameの初期値は「none」です。これは、「参照するキーフレームが存在しない」ということで、このままだと何も起きません。
アニメーション名を記述しないとCSSアニメーションが発動しないのは、この初期値が「none」になっているからです。
名前は好きなもので構わないのですが、他のキーフレームやプロパティの値と重複しないものを付けましょう。
この後紹介する「一括指定」を行ったときに、ブラウザが誤認識してしまいます。
animation-duration、CSSアニメーションの所要時間を指定するプロパティです。
値には「s(秒)」や「ms(ミリ秒)」が使えます。マイナスの値や0を指定すると、アニメーションは実行されません。
初期値は「0s」です。したがってこれも値を入れ直してやらないと、動きません。
animation-iteration-countは、アニメーションの繰り返し回数を指定します。初期値は「1」で、数値に単位を付けずに記述します。
永遠に繰り返したい場合には2つ目のサンプルのように「infinity」を指定しましょう。
animation-iteration-countを具体的な整数、例えば「3」にした場合、webページがロードされた段階でCSSアニメーションが実行されてしまいます。
アニメーションさせたい要素がページの下のほうに配置されていると、ユーザがスクロールしてその要素が表示されたときにはもうアニメーションが終了してしまっている、という状況に成増。
それを防ぐためにはJavaScriptによる制御が必要になってきます。
興味のある方はこちら⬇︎の記事を参考にしてください。
CSSアニメーション、発火のタイミングを制御する。
〽️ 好きなタイミングで発火/消火。
要素が画面内に表示されたらアニメーション、Intersection Observer。
〽️ コピペで試してみてね。
CSSアニメーションのプロパティは、最低でも上記のanimation-nameとanimation-durationを指定しないと動きません。
実際には数種類のものを指定することになると思いますが、各プロパティをいちいち記述するのは骨が折れます。いや、2つでもダルい。
CSSアニメーション入門者の方も、このへんが「うんざり」するかもしれません。
嬉しいことに、CSSアニメーションのプロパティは ショートハンド(一括指定)での記述が可能です。
それがanimationプロパティです。
例えば。
だと、
値部分のみを半角スペースで挟んで羅列し、このように書くことができます。
今、サンプルでは3つのプロパティ値を並べました。
記事の始めに紹介したように、CSSアニメーションの個別プロパティは全部で8つあります。animationプロパティには、指定したいものだけを記述する形で構いません。
各プロパティの記述順は基本的に順不同ですが、animation-durationと次回紹介するanimation-delayプロパティの前後関係だけは守らなくてはいけません。
これについては次回の記事で詳しくお伝えします。
とっても便利なショートハンド(一括指定)。
ただし。プロパティ値のみを並べる形をとっているが故に、「どの値がどのプロパティのものなのか判断できる状態」でないといけません。
〜先ほどのanimation-nameの話に戻ります。
このようにanimation-name、アニメーション名を「infinite」などとしていると。
一括指定で他のプロパティ値を並べたときに、
本来指定したいanimation-iteration-countは「10」。
ただしプロパティなしで値だけをみると、アニメーション名である「infinite」はiteration-countの値とも取れます。
そうするとブラウザ側はiteration-countの値を「10」とすべきなのか、はたまた「infinite」とするべきなのか? 判断がつかなくなってしまいます。
結果、「プロパティ値が重複されている」とみなされ、このCSSアニメーションは実行されません。
animation-nameは他のプロパティと違って値の形式が定められておらず、自由に書くことができます。
それだけに、他のプロパティ値と被らないように注意してください。
プロパティ値っぽくない名前、例えば
「move_to_right」とか、
「color_change」
などとしておけば、まづ心配ありません。
第2回のキーフレームの内容を踏まえて、コードを短縮化してみましょう。
CSS
サンプル⬆︎は、「要素が左から右へ移動する」というCSSアニメーションですが、コードをベタに書いた場合。
今度は一括指定とキーフレームの0%を省略して書いてみます。
かなり短縮することができました。
これでコーディングも楽に成増ね。
最後までお読みくださり、ありがとうございました。
一括指定〜ショートハンドについては全プロパティの紹介後にお伝えしようとしていたのですが、いち早く「楽な書き方」を紹介したいと思い、ちょっとフライング気味で登場させました(笑)
次回以降も他のプロパティについて紹介していきます。楽しみにしててくださいね。
ではまた〜 ♩♩
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。