@keyframesとAndroid

CSS3の@keyframesでアニメーションを作成しているんですがAndroidでかなりバグがあるようです。

transformに複数の値を指定すると動かない

@-webkit-keyframes hogeName{
	0% {-webkit-transform:scale(1,2)}
	50% {-webkit-transform:scale(2,2) translateY(10px)}
	100% {-webkit-transform:scale(1,1) translateY(0)}
}

サンプル

というようにtransformに複数の値が不規則に入る場合Androidでは動作しなくなることがあります。（このサンプルだとscaleの指定が無視される）

@-webkit-keyframes hogeName{
	0% {-webkit-transform:scale(1,2) translateY(0)}
	50% {-webkit-transform:scale(2,2) translateY(10px)}
	100% {-webkit-transform:scale(1,1) translateY(0)}
}

サンプル

という具合に初期値も省略せずに指定するとちゃんと表示されるようになります。

0%の省略がうまく動かない

@-webkit-keyframes hogeName{
	50% {-webkit-transform:scale(2,2) translateY(10px)}
	100% {-webkit-transform:scale(1,1) translateY(0)}
}

サンプル

という具合に0%の指定を省略するとAndroidでまったく動かなくなります。

@-webkit-keyframes hogeName{
	0% {-webkit-transform:scale(1,1) translateY(0)}
	50% {-webkit-transform:scale(2,2) translateY(10px)}
	100% {-webkit-transform:scale(1,1) translateY(0)}
}

サンプル

ちゃんと0%の際の値(初期値)も指定しておきましょう。

@keyframes以外の指定とバッティングする

@-webkit-keyframes main01card01 {
	0% {-webkit-transform:translateY(0) scale(1,1) rotate(0) }
	50% {-webkit-transform1:translateY(50px) scale(1,1) rotate(6deg) }
	100% {-webkit-transform:translateY(8px) scale(5,5) rotate(0) }
}

は一見動きそうだけどアニメーション要素に0%と異なる指定がある場合Androidだけ動かなくなる。（今回はscaleの指定が）

#main01main{
	-webkit-animation:hogeName 5s;
	-webkit-transform:translateY(0px) rotate(35deg);
}

サンプル

#main01main{
	-webkit-animation:hogeName 5s;
}

サンプル

という具合にアニメーション要素の指定は取ってしまいましょう。

-webkit-animation-fill-mode : both;の指定が効かない

-webkit-animation-fill-mode : both;を指定するとアニメーション終了時も100%のスタイルを維持するのですが、Androidでは動作しません。

サンプル

-webkit-animation:hogeName 5s;
-webkit-animation-fill-mode : both;
-webkit-transform:scale(5,5);

といった具合に100%時のスタイルをアニメーション要素にあらかじめ指定しておくことで回避できます。

サンプル

関連エントリー

続：Androidブラウザでviewportのwidth指定
Android2.2 とtransformのバグ
スマートフォンとposition:fixedのバグ
AndroidとjQueryのスライドアニメーションの不具合
Androidのposition:absoluteとフォームの問題

スポンサードリンク

«スマホサイト案件の見積もりについて | メイン | CSS3でセレクトボックスをカスタマイズ»