🧊

Android 2.x系でのCss3アニメーション

なんか動いたり動かなかったり動かなかったり・・・。
動いたかと思えば一見まったく関係なさそうなとこがご乱心なさったり・・。


コレがWeb業界に生きるということか！
というわけで、keyframeアニメーションの指定の際に、気をつけたい点と、アンチパターンのメモ。

動いた

@-webkit-keyframes 'hop' {
	0% { -webkit-transform: translate3d(0,0,0);opacity: 0; }
	5% { -webkit-transform: translate3d(0,0,0);opacity: 1; }
	90% { -webkit-transform: translate3d(30px,- 150px,0);opacity: 0; }
	99.9%,to { -webkit-transform: translate3d(0,0,0);opacity: 0; }
}

ダメだった

そのいち

@-webkit-keyframes 'hop' {
	0% { -webkit-transform: translate3d(0,0,0);opacity: 0; }
	5% { -webkit-transform: translate3d(0,0,0);opacity: 1; }
	90% { -webkit-transform: translate3d(30px,- 150px,0);opacity: 0; }
	99.9%/* 100%もダメ(な時があった) */ { -webkit-transform: translate3d(0,0,0);opacity: 0; }
}

そのに

@-webkit-keyframes 'hop' {
	0% { -webkit-transform: translate3d(0,0,0);opacity: 0; }
	5% { -webkit-transform: translate3d(0,0,0);opacity: 1; }
	90% { -webkit-transform: translate3d(30px,- 150px,0);opacity: 0; }
	100%/* toにしないとダメ */ { -webkit-transform: translate3d(0,0,0);opacity: 0; }
}

そのさん

@-webkit-keyframes 'hop' {
	0% { -webkit-transform: translate3d(0,0,0);opacity: 0; }
	5% { -webkit-transform: opacity: 1; } /* 動かすtranslateの過程を省略したらダメ */
	90% { -webkit-transform: translate3d(30px,- 150px,0);opacity: 0; }
	99.9%,to { -webkit-transform: translate3d(0,0,0);opacity: 0; }
}

ぬーん。

総じて

参考：@keyframesとAndroid[to-R]
参考：AndroidブラウザでCSS3する時の注意点など - bradtosのWEB開発日記

にもある通り、

  • 0%の初期値を省略しない
  • 100%は99.9%, toにする
  • 過程を省略しない
  • 元要素で邪魔しない

とすればだいたいは動く・・はずよね？

でもどこどこの記事ではコレで動く！って書いてあっても、その時々で微妙にパターンが違ってて結局ダメみたいなのが多かったのよね。

ここに関してはよっぽどのこだわりがない限り、ばっさりいって良いんじゃなかろうかと・・。（自分に言い聞かせるように