AndroidとCSS3アニメーション

Androidの標準ブラウザ、CSS3アニメーションでハマった事のメモ。

擬似要素はキーフレームアニメーションが動かない

Androidでは、:before,:afterなどの擬似要素に対するアニメーションがうごかないようです。。
なので、子要素を用意し、その子要素に対してアニメーションを指定する必要があります。

// 動かない
#target:after {
  content: "",
  @include animation(move .3s infinite);
}

// 動く
#target > #child-el {
  content: "",
  @include animation(move .3s infinite);
}

キーフレームアニメーションのsteps()関数が動かない!

Android 2.3などの、一部古い端末ではsteps()関数が存在しないようです。。
そんな時は、0〜100%の各値を1つずつ定義してあげます。

@include keyframes(step-anim){
  0% {background-position: 0  -0.0px;}
  3.9999% {background-position: 0 -0.0px;}
  4% {background-position: 0  -116.04166666666667px;}
  7.9999% {background-position: 0 -116.04166666666667px;}
  8% {background-position: 0  -232.08333333333334px;}
// - 中略 -
  96% {background-position: 0  -2785.0px;}
  99.9999% {background-position: 0 -2785.0px;}
  100% {background-position: 0  -2901.041666666667px;}
}

これを手動で入力するのは現実的でないので、SCSS mixin を書いておいた。

おまけ

keyframe-animationで、steps(2)として、2フレームを交互に切り替えるようなアニメーションをする時のチップス。 CODE PENで見本があるのですが、これも無駄に時間を持って行かれた…。

// 動かない
@keyframes countdown {  
  0% { background-position: 0 0; } 
  100% {background-position: 0 100%; } 
}

// 動く
@keyframes countdownTo2 {  
  0% { background-position: 0 0; } 
  100% {background-position: 0 -100px; } 
}

SHOTA

I'm WEB developer

Tokyo, Japan http://senta.me/