原森情報技術研究所 WEBコンテンツ企画・制作・運営・サポート / 兵庫県 神戸市 明石市 /

animation-name

animation-nameの複数指定を実験してみた

animation-nameの複数指定サンプル

例1

例1

前ページの例1(ta_1)と例3(ta_3)を指定。

説明

各アニメ

ta_1
ta_3

ta_1 3s と ta_3 1s

失敗例1

失敗例

ta_1、ta_2、ta_3の順に指定。

失敗例2

失敗例

ta_1、ta_3、ta_2の順に指定。

説明

例2

テスト2

回転・拡大縮小しながら上下左右移動。

説明

例3

テスト3

左右移動 + 回転 + 拡大縮小 + 透明度変化
を繰り返すアニメサンプル。

説明

3つ

ta_5
ta_6
ta_7

例3のアニメをそれぞれ表示。※ta_5と6が重なるので、6はleft:100px の位置に配置。

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
animation-timing-function CLICK
animation-delay CLICK
animation-iteration-count CLICK
animation-direction CLICK
animation-fill-mode CLICK
animation-play-state CLICK

ページトップへ

top > css3研究 > 
animation-name

例1のアニメ設定

animation : ta_1 3s linear infinite alternate,ta_3 1s linear infinite alternate;
ショートハンドではない記述は以下のようになります。
animation-name : ta_1,ta_3;
animation-duration : 3s,1s;
animation-timing-function : linear;
animation-iteration-count : infinite;
animation-direction : alternate;

例1のキーフレーム

@keyframes ta_1{
0%{background-color : rgb(255,0,0);}
50%{background-color : rgb(0,255,0);}
100%{background-color : rgb(0,0,255);}
}

と、
@keyframes ta_3{
0%{transform : translate(0px);
width : 30px;}
20%{transform : translate(0px);
width : 60px;}
80%{transform : translate(150px);
width : 60px;}
100%{transform : translate(180px);
width : 30px;} }

例2のアニメ設定

animation : ta_2 4s ease infinite alternate,ta_4 2s linear infinite alternate;
ショートハンドではない記述は、以下。
animation-name : ta_2,ta_4;
animation-duration : 4s,2s;
animation-timing-function : ease,linear;
animation-iteration-count : infinite;
animation-direction : alternate;

例2のキーフレーム

@keyframes ta_2{
0%{transform : rotate(0deg) scale(1);}
25%{transform : rotate(360deg) scale(1);}
50%{transform : rotate(180deg) scale(1);}
75%{transform : rotate(0deg) scale(2);}
100%{transform : rotate(360deg) scale(2);}
}

と、
@keyframes ta_4{
0%{top : 0px;left : 0px;}
50%{top : 25px;left : 200px;}
100%{top : 50px;left : 0px;}
}

例3のアニメ設定

animation :
ta_5 2s linear infinite alternate,
ta_6 1s linear infinite alternate,
ta_7 2s linear infinite alternate;

例3のキーフレーム

@keyframes ta_5{
0%{transform : rotateZ(-360deg) scale(0);}
50%{transform : rotateZ(0deg) scale(1.5);}
100%{transform : rotateZ(360deg) scale(0);}
}

と、
@keyframes ta_6{
0%{opacity : 0;}
100%{opacity : 1;}
}

と、
@keyframes ta_7{
0%{left : 0px;}
100%{left : 200px;}
}

失敗例のアニメ設定

失敗例1
animation :
ta_1 3s linear infinite alternate,
ta_2 4s ease infinite alternate,
ta_3 1s linear infinite alternate;

失敗例2
animation :
ta_1 3s linear infinite alternate,
ta_3 1s linear infinite alternate,
ta_2 4s ease infinite alternate;
@keyframes ta_1{
0%{background-color : rgb(255,0,0);}
50%{background-color : rgb(0,255,0);}
100%{background-color : rgb(0,0,255);}
}

@keyframes ta_2{
0%{transform : rotate(0deg) scale(1);}
25%{transform : rotate(360deg) scale(1);}
50%{transform : rotate(180deg) scale(1);}
75%{transform : rotate(0deg) scale(2);}
100%{transform : rotate(360deg) scale(2);}
}

@keyframes ta_3{
0%{transform : translate(0px);
width : 30px;}
20%{transform : translate(0px);
width : 60px;}
80%{transform : translate(150px);
width : 60px;}
100%{transform : translate(180px);
width : 30px;} }

※ta_2 と ta_3 はtransformプロパティが重複しています

Multi-column layout

columns column-count column-gap column-rule column-rule-color column-rule-width column-width

update 2015.07.17
カテゴリMENU
お問い合せ