bradtosのWEB開発日記

WEB開発エンジニアbradtosによる、JavaScriptやHTML5/CSS3の最新情報などなど・・・



2012-07-13

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

16:07

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



そういえば思っていたよりスマホでの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と同じように、

全てのキーフレームに記述しなければならない。



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

@-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)を記述しなければならないのだ。

scale()を指定しない=scale(1)と同義になるためだ。

前述のopacityとの組み合わせの場合とは意味合いが異なるが、

実機でなかなか動かなくて「?」とならないためにも

律儀に綺麗に記述する習慣を身に着けよう。



誰かCSS3をグラフィカルに定義できるIDEを開発したら売れるんじゃなかろうか。

Android4.0についてはまだ研究段階だが、

既存のCSSはそのままでは動かないこともある模様。

把握できたらまた記事にしたいと思う。

トラックバック - http://d.hatena.ne.jp/bradtos/20120713/1342163269
リンク元