CSSアニメーション03、
プロパティ概要と一括指定について。

〽️とりあえず必要系。 〽️一括指定。 〽️ここまで縮まる。





⬆︎CSSアニメーションについてのまとめページはこちら。

こんにちは、「ふ」です。
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
 初期値:none。


#sample { 「「1animation-name : animation1;」」 } @keyframes 「「1animation1」」 { ・・・・ }

animation-nameは、セレクタ外部に記述するキーフレームと紐づけるために指定するプロパティです。

animation-nameの初期値は「none」です。これは、「参照するキーフレームが存在しない」ということで、このままだと何も起きません。
アニメーション名を記述しないとCSSアニメーションが発動しないのは、この初期値が「none」になっているからです。

「「4✖️」」 animation-name:infinitiy;  「「4⬆︎良くない。 「infinity」 はanimation-durationプロパティに使われる値。」」

名前は好きなもので構わないのですが、他のキーフレームやプロパティの値と重複しないものを付けましょう。
この後紹介する「一括指定」を行ったときに、ブラウザが誤認識してしまいます。

 ② animation-duration
 初期値:0s。


#sample { 「「1animation-duration:5s;」」 }

animation-duration、CSSアニメーションの所要時間を指定するプロパティです。
値には「s(秒)」や「ms(ミリ秒)」が使えます。マイナスの値や0を指定すると、アニメーションは実行されません。

初期値は「0s」です。したがってこれも値を入れ直してやらないと、動きません。

 ③ animation-iteration-count
 初期値:1。


#sample1 { 「「1animation-iteration-count:5;」」 } #sample2 { 「「1animation-iteration-count:infinity;」」 }

animation-iteration-countは、アニメーションの繰り返し回数を指定します。初期値は「1」で、数値に単位を付けずに記述します。
永遠に繰り返したい場合には2つ目のサンプルのように「infinity」を指定しましょう。

ところで。

animation-iteration-countを具体的な整数、例えば「3」にした場合、webページがロードされた段階でCSSアニメーションが実行されてしまいます。

アニメーションさせたい要素がページの下のほうに配置されていると、ユーザがスクロールしてその要素が表示されたときにはもうアニメーションが終了してしまっている、という状況に成増。

それを防ぐためにはJavaScriptによる制御が必要になってきます。
興味のある方はこちら⬇︎の記事を参考にしてください。

CSSアニメーション、発火のタイミングを制御する。

〽️ 好きなタイミングで発火/消火。



要素が画面内に表示されたらアニメーション、Intersection Observer。

〽️ コピペで試してみてね。


一括指定。


#sample { animation-name:〇〇; animation-duration:〇〇; }

CSSアニメーションのプロパティは、最低でも上記のanimation-nameとanimation-durationを指定しないと動きません。
実際には数種類のものを指定することになると思いますが、各プロパティをいちいち記述するのは骨が折れます。いや、2つでもダルい。
CSSアニメーション入門者の方も、このへんが「うんざり」するかもしれません。


 ▶︎一括指定、
 animationプロパティ。

嬉しいことに、CSSアニメーションのプロパティは ショートハンド(一括指定)での記述が可能です。
それがanimationプロパティです。

例えば。

#sample { animation-name:「「1anime1」」; animation-duration:「「13s」」; animation-iteration-count:「「1infinite」」; }

だと、

#sample { 「「1animation:anime1 3s infinite;」」 }

値部分のみを半角スペースで挟んで羅列し、このように書くことができます。


 ▶︎ 一括指定の
 数と順序。

今、サンプルでは3つのプロパティ値を並べました。
記事の始めに紹介したように、CSSアニメーションの個別プロパティは全部で8つあります。animationプロパティには、指定したいものだけを記述する形で構いません。




animation:3s anime1 infinite; 「「2← OK」」 animation:infinite 3s anime1; 「「2← OK」」

各プロパティの記述順は基本的に順不同ですが、animation-durationと次回紹介するanimation-delayプロパティの前後関係だけは守らなくてはいけません。
これについては次回の記事で詳しくお伝えします。

 ▶︎ 注意:
 animation-name。

とっても便利なショートハンド(一括指定)。
ただし。プロパティ値のみを並べる形をとっているが故に、「どの値がどのプロパティのものなのか判断できる状態」でないといけません。

〜先ほどのanimation-nameの話に戻ります。

#sample { animation-duration:3s; animation-iteration-count:10; animaton-name:「「4infinite」」; }

このようにanimation-name、アニメーション名を「infinite」などとしていると。
一括指定で他のプロパティ値を並べたときに、

#sample { animation:3s 10 「「4infinite」」; }

本来指定したいanimation-iteration-countは「10」。
ただしプロパティなしで値だけをみると、アニメーション名である「infinite」はiteration-countの値とも取れます。

そうするとブラウザ側はiteration-countの値を「10」とすべきなのか、はたまた「infinite」とするべきなのか? 判断がつかなくなってしまいます。

結果、「プロパティ値が重複されている」とみなされ、このCSSアニメーションは実行されません。

animation-nameは他のプロパティと違って値の形式が定められておらず、自由に書くことができます。
それだけに、他のプロパティ値と被らないように注意してください。


プロパティ値っぽくない名前、例えば

「move_to_right」とか、
「color_change」

などとしておけば、まづ心配ありません。

ここまで縮まる。


第2回のキーフレームの内容を踏まえて、コードを短縮化してみましょう。

CSS

サンプル⬆︎は、「要素が左から右へ移動する」というCSSアニメーションですが、コードをベタに書いた場合。

#sample { margin-left:0%; animation-name;sample1; anmation-duration:5s; animation-iteration-count:infinite; } @keyframes sample1 { bb0% { margin-left:0%; } bb100% { margin-left:60%; } }

今度は一括指定とキーフレームの0%を省略して書いてみます。

#sample { animation:sample1 5s infinite; } @keyframes sample1 { bbto { margin-left:60%; } }

かなり短縮することができました。
これでコーディングも楽に成増ね。

最後までお読みくださり、ありがとうございました。
一括指定〜ショートハンドについては全プロパティの紹介後にお伝えしようとしていたのですが、いち早く「楽な書き方」を紹介したいと思い、ちょっとフライング気味で登場させました(笑)
次回以降も他のプロパティについて紹介していきます。楽しみにしててくださいね。
ではまた〜 ♩♩














「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。