AndroidブラウザでCSS3する時の注意点など

前回からだいぶ間が空いたけど続きをば。



そういえば思っていたよりスマホでのHTML5開発の記事が増えない。
もはやそこまで最先端って感じでもなくなってきたし、
興味ある人が少ないのか、それとも情報を公開したくないのか。
半年ほど今の仕事をやってきて、
いろいろと慣れてきたので、

キーフレームアニメーションする時の注意点を
書きたいと思う。


まずキーフレーム定義において、
最初と最後の要素は0%またはfromおよび100%またはto
としてフレームを指定するのだが、
（以下は透明にフェードアウトする）

@-webkit-keyframes kf1 {
  from{
    opacity:1;
  }
  to{
    opacity:0;
  }
}

実はtoの部分にバグがあるため
これでは一部のバージョンでは動かない。
なのでそれを防ぐためには以下のように書く必要がある。

@-webkit-keyframes kf1 {
  from{
    opacity:1;
  }
  99.9%,to{
    opacity:0;
  }
}

toとともに99.9%の指定を追加した。
99.99%でももちろん構わないが、100%ではtoと同義なのでダメである。
これでは厳密にいうと時間軸が綺麗ではなくなるため
少々気持ちが悪いが、仕方がない。



もう一つ。
前半は透明度を変え、後半はtransformしたいといった場合、

@-webkit-keyframes kf1 {
  from{
    opacity:0;
  }
  50%{
    opacity:1;
    -webkit-transform:scale(1);
  }
  99.9%,to{
    -webkit-transform:scale(2);
  }
}

と書きたくなるがこれもダメである。
少々面倒だしキーフレームごとにどんな動きがあるのかわかりにくくなるが、

@-webkit-keyframes kf1 {
  from{
    opacity:0;
    -webkit-transform:scale(1);
  }
  50%{
    opacity:1;
    -webkit-transform:scale(1);
  }
  99.9%,to{
    opacity:1;
    -webkit-transform:scale(2);
  }
}

としなければならない。
また、transformはあくまでもひとつのプロパティなので、
その中で指定できる関数「translate()」や「scale()」を
組み合わせて使いたい場合、
どれかのキーフレームで指定したい関数がある場合は
上記のopacityとtranslateと同じように、
全てのキーフレームに記述しなければならない。



例えば、全体を通して２倍に拡大しながら移動して戻る場合

@-webkit-keyframes kf1 {
  from{
    -webkit-transform:translate(0px,0px) scale(1);
  }
  50%{
    -webkit-transform:translate(10px,10px);
  }
  99.9%,to{
    -webkit-transform:translate(0px,0px) scale(2);
  }
}

これでは期待通りに動かない。
面倒でも以下のようにする必要がある。

@-webkit-keyframes kf1 {
  from{
    -webkit-transform:translate(0px,0px) scale(1);
  }
  50%{
    -webkit-transform:translate(10px,10px) scale(1.5);
  }
  99.9%,to{
    -webkit-transform:translate(0px,0px) scale(2);
  }
}

つまり、最終的にscale(2)することは分かっていても、
50%の折り返し地点がキーフレームになっていれば
わざわざ計算してscale(1.5)を記述しなければならないのだ。

  • webkit-transformプロパティ内で

scale()を指定しない=scale(1)と同義になるためだ。
前述のopacityとの組み合わせの場合とは意味合いが異なるが、
実機でなかなか動かなくて「？」とならないためにも
律儀に綺麗に記述する習慣を身に着けよう。



誰かCSS3をグラフィカルに定義できるIDEを開発したら売れるんじゃなかろうか。
Android4.0についてはまだ研究段階だが、
既存のCSSはそのままでは動かないこともある模様。
把握できたらまた記事にしたいと思う。