animation-nameは複数指定が可能

[animation-name] はキーフレーム名(アニメ名)を指定するだけ、というものなので、cssの解説をしているwebサイトをいろいろ眺めてみても、それほど重要視されてない印象があります。
大抵は、「キーフレームを用意し、そのキーフレーム名を指定します」等と書いてるだけかと思います。

「カンマ区切りで複数指定ができる」という仕様は、アニメ動作を1つのキーフレームで無理に作らなくてもよい、ということを意味しています。

ということで、複数のキーフレーム名（アニメ名）指定を使って、動作を組み合わせたアニメを作る実験をしてみました。

例1の内容【背景色変化と左右移動アニメ】

1sで横移動（合計2sで左右移動）を繰り返しながら、3sごとに赤→緑→青、青→緑→赤へと背景色が変化する、という2つのアニメを指定しています。
各動作の1回の秒数が異なるので、1つのキーフレームだけで書くのは、かなり複雑になってしまうかと思われますが、それぞれのキーフレームを用意し、両方を指定するだけで、合成されたアニメになっています。

アニメ設定、キーフレーム設定を表示

左右移動アニメは設定では「右移動のみ」を キーフレーム 0% 20% 80% 100% で設定し、色変化アニメは赤緑青への変化を 0% 50% 100%で設定しています。

例1へ

【失敗例：同じプロパティは後の方で上書きされる】

前ページの例2(ta_2)と例3(ta_3)は変化するcssプロパティで、どちらもtransform指定があります。
transform部分は重複してしまいますので、後に書いた方が有効（上書き）になり、合成された動作ではなく、重複部分は後に書いてある指定の動作が採用されています。(失敗例1、2)。
失敗例1では、左右移動、失敗例2の方は回転と拡大縮小となっています。

前ページのサンプルのプロパティは、 例1(ta_1)「background-color」、例2(ta_2)「transformのrotate scale」、例3(ta_3)「transformのtranslate」と「width」 となっています。

失敗例1は、例1「background-color」と例3「transformのtranslate」「width」のアニメになっています。
例2 の [rotate scale] が同じ transform プロパティで指定されている 例3 の [translate] で上書きされています。
すなわち、rotate scale (回転と拡縮) しない、ということです。

失敗例2は、例1「background-color」と例3「width」と例2「transformのrotate scale」のアニメになっています。
例3 の [translate] が 例2 の[rotate scale] で上書きされています。
すなわち、translate (移動) しない、ということです。

アニメ設定、キーフレーム設定を表示

失敗例へ

例2の内容【transformで回転/拡大縮小、top/leftで上下左右移動】

秒数が同じなら、1つのアニメでtransformを使うかと思いますが、異なる秒数でtransform変形関連と移動のアニメを合成したものを作る場合には、移動アニメをtransform : translate ではなく、top , left の値を変化させる方法で実現する、などが考えられます。

回転と拡大縮小アニメは前ページの例2のまま。…1回4s、0deg、360deg(1回転)、180deg、0degに回転+2倍拡大、2倍拡大状態で360deg(1回転)を反転繰返し。
例2でtransformを使用しているので、左右移動のアニメは、position:absolute状態のボックスをtopやleftの値を変化させることで上下左右移動になるように作ってみました。

アニメ設定、キーフレーム設定を表示

例2へ

例3の内容【3つのアニメ】

ta_5が回転しながら拡大縮小する動作を 2s で1回。ta_6が 1s で透明から不透明に変化。ta_7が 2s でleft:0px から left:200px へ横移動。
というアニメを反転再生しながら繰り返します。

3つのアニメの合成で、奥から中央前へと回転しながら現れ、手前で跳ね返り、奥へと回転しながら消えていく動作に見えるようにしてみました。
※例3の各アニメを確認できるように、それぞれ下に配置。（※透明度変化のta_6は重ならないようにleft:100pxを指定しています）

アニメ設定、キーフレーム設定を表示

例3へ

ネタコラム

複数のキーフレーム指定で、transform の 値が上書きとなる仕様について、通常のcss記述でも後に書いた方が有効になるという仕様なので、当然なのですが、 transform-function が違う部分をうまく（別のアニメで重複しているプロパティ分を合成して）実現してくれればいいのに…、 などと思ってしまうかもしれません。
ですが、transform で複数指定しているかのように見える translate や rotate や scale 等はブラウザ内で計算されて、matrix 又は matrix3d で表示される1個の値になっています。
※[transforms > matrix3d]にも記事を書いてます。

なので、例えば rotate(90deg) scale(0.5) の場合、jsで値を取得してみると matrix(0, 0.5, -0.5, 0, 0, 0) になっています。これは、ブラウザのプログラム側からは人が考える意味的な差分（回転と左右移動）は存在していない、ということなのです。ということで別のアニメから同じプロパティの二つの値を渡されて、そこから回転や移動の差分を取ることは不可能、ということになります。

ちなみに、このページのアニメ設定やキーフレームは、下記のツールで作成しました。
【Animation ソース作成ツール】【keyframes ソース作成ツール】

animationのプロパティ

animation-name CLICK

適用するキーフレーム(アニメ名)を指定。カンマ区切りで複数指定ができる。

animation-duration CLICK

1回のアニメーション時間を指定。1s 等と指定。初期値の0sはアニメーションを実行しない設定。

animation-timing-function CLICK

キーフレームの始まりから終わりまでの間のアニメの仕方を指定

キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。一方、キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。(引用：[MDN] animation-timing-function )

3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。
A,B,C,D は それぞれA(xa,ya)=A(0,0), D(xd,yd)=D(1.0,1.0)は省略で、
BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。
変化量は文字でも可能。
ease = cubic-bezier(0.25, 0.1, 0.25, 1.0) (初期値)
linear = cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in = cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out = cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0)

animation-delay CLICK

アニメ開始の待ち時間を指定。1s 等。
初期値=0(すぐに開始)。負の値の場合、過去にさかのぼって開始されていたアニメのと中からはじまる。

animation-iteration-count CLICK

アニメーションを繰り返す回数。1 や 2 などと数値、又は infinite (無期限に繰り返す)。
アニメ周期の一部を実行する場合、整数以外の値(例：0.5なら半分だけ実行)を指定も可能。

animation-direction CLICK

アニメの繰り返し時に、逆方向か最初の状態から再び開始するか、の繰り返しの方法を指定。

normal…順方向のアニメーションのみ(デフォルト)

alternate…初回 順方向、次に逆方向、以降、順、逆…と実行。(順 逆 順 逆 …)

reverse…逆方向のアニメーションのみ

normal…順方向のアニメーションのみ(デフォルト)

alternate-reverse…初回 逆方向、次に順方向、以降、逆、順…と実行。(逆 順 逆 順 …)

animation-fill-mode CLICK

アニメの実行前や実行後に適用するスタイルを指定。

normal…アニメで指定されたスタイルは、アニメの実行前や実行後には適用されない。

forwards…アニメの最後に適用された状態を維持する。通常は100%やtoのスタイルになる。※animation-directionが alternate、animation-iteration-count が偶数の場合は0%やfromのスタイルとなる。

backwards…0%やfrom キーフレームで定義された値を即座に適用し、animation-delay プロパティで指定した時間の間、その状態を維持する。

both…forwards と backwards の両方の規定に従う。なのでアニメの設定が実行前と実行後の両方に適用される。

animation-play-state CLICK

アニメを一時停止、再開などを指定する設定。この仕様については、マウスホバーでrunningとpausedを切り替えるなどを想定してるのではないかと思う。

ページトップへ