比率計算animation-nameTransition基本指定-property-duration-timing-function-delaytranslatescalerotateskewperspectiveperspective-origintransform-styletransform-originmatrixmatrix3dbackface-visibilityAnimation基本指定-name-duration-timing-function-delay-iteration-count-direction-fill-mode-play-stateanimation-nameの複数指定を実験してみたanimation-nameの複数指定サンプル例1例1前ページの例1(ta_1)と例3(ta_3)を指定。1s失敗例1失敗例ta_1、ta_2、ta_3の順に指定。失敗例2失敗例ta_1、ta_3、ta_2の順に指定。透明度変化を繰り返すアニメサンプル。説明3つta_5ta_6ta_7例3のアニメをそれぞれ表示。キーフレーム名(アニメ名)を指定するだけ、というものなので、cssの解説をしているwebサイトをいろいろ眺めてみても、それほど重要視されてない印象があります。「キーフレームを用意し、そのキーフレーム名を指定します」等と書いてるだけかと思います。「カンマ区切りで複数指定ができる」という仕様は、アニメ動作を1つのキーフレームで無理に作らなくてもよい、ということを意味しています。いうことで、複数のキーフレーム名(アニメ名)指定を使って、動作を組み合わせたアニメを作る実験をしてみました。背景色が変化する、という2つのアニメを指定しています。各動作の1回の秒数が異なるので、1つのキーフレームだけで書くのは、かなり複雑になってしまうかと思われますが、それぞれのキーフレームを用意し、両方を指定するだけで、合成されたアニメになっています。100%で設定しています。前ページの例2(ta_2)と例3(ta_3)は変化するcssプロパティで、どちらもtransform指定があります。transform部分は重複してしまいますので、後に書いた方が有効(上書き)になり、合成された動作ではなく、重複部分は後に書いてある指定の動作が採用されています。2の方は回転と拡大縮小となっています。失敗例1は、例1「background-color」と例3「transformのtranslate」「width」のアニメになっています。しない、ということです。scale」のアニメになっています。しない、ということです。値を変化させる方法で実現する、などが考えられます。回転と拡大縮小アニメは前ページの例2のまま。...1回4s、0deg、360deg(1回転)、180deg、0degに回転+2倍拡大、2倍拡大状態で360deg(1回転)を反転繰返し。例2でtransformを使用しているので、左右移動のアニメは、position:absolute状態のボックスをtopやleftの値を変化させることで上下左右移動になるように作ってみました。透明から不透明に変化。いうアニメを反転再生しながら繰り返します。3つのアニメの合成で、奥から中央前へと回転しながら現れ、手前で跳ね返り、奥へと回転しながら消えていく動作に見えるようにしてみました。※例3の各アニメを確認できるように、それぞれ下に配置。思ってしまうかもしれません。表示される1個の値になっています。matrix3d]にも記事を書いてます。これは、ブラウザのプログラム側からは人が考える意味的な差分(回転と左右移動)は存在していない、ということなのです。いうことで別のアニメから同じプロパティの二つの値を渡されて、そこから回転や移動の差分を取ることは不可能、ということになります。ちなみに、このページのアニメ設定やキーフレームは、下記のツールで作成しました。CLICK適用するキーフレーム(アニメ名)を指定。カンマ区切りで複数指定ができる。CLICK1回のアニメーション時間を指定。初期値の0sはアニメーションを実行しない設定。CLICKキーフレームの始まりから終わりまでの間のアニメの仕方を指定キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。)3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。D(xd,yd)=D(1.0,1.0)は省略で、BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。変化量は文字でも可能。CLICKアニメ開始の待ち時間を指定。初期値=0(すぐに開始)。負の値の場合、過去にさかのぼって開始されていたアニメのと中からはじまる。CLICKアニメーションを繰り返す回数。(無期限に繰り返す)。アニメ周期の一部を実行する場合、整数以外の値(例:0.5なら半分だけ実行)を指定も可能。CLICKアニメの繰り返し時に、逆方向か最初の状態から再び開始するか、の繰り返しの方法を指定。