このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2014.08.25

CSS3アニメーション をスマートフォンサイトで 綺麗に作りたいあなたへ

どうも。

お手紙みたいな題名になって申し訳ありません。

今更感たっぷりなところもあるのですが、これからweb制作を始めるって方もいるかと思い、需要もあるかと思いますので、今回は、CSS3アニメーションの制作のコツを大事なところだけまとめてみました。

昨今、スマートフォンの登場によってhtml5やCSS3、Javascriptが非常に注目されるようになりました。今までFlashで表現されていたアニメーション等もDOMで表現されるようになり、Flashサイトは瞬く間に減少していきました。

そんな時代なのもあって、css3アニメーションを自由自在に操れると、結構重宝されるかと思いますよw

今回は、技術書にも多分書かれてなく学校なんかでも教えてはくれない(多分です。)大事なポイントを3つにしぼり(もっとありますが。。)紹介致します。

「Androidで違った症状が出る。。」「Androidでなめらかにアニメしない。」「Androidで。。。」

と、Androidさんと戦っている方は必見ではないでしょうかぁ。

CSS3アニメーション キーフレーム

コーディングしてきた方に、いきなり「キーフレーム」と言われてもピンとこなかったりするかもしれませんね。

CSS3のキーフレームは、AdobeのFlashのタイムラインと同様の考えを持って頂ければと思います。

Flash制作でモーショントゥイーンを行う際に用いられるタイムライン。

この場合、1フレームがキーフレームの0%、22フレームがキーフレームの100%となります。

 

実装ポイント

大きくポイントは3つ

・初期値は 0%指定と同様

・キーフレームのプロパティを省略しない

・opacity 0は負荷高し

初期値は 0%指定と同様

これは、キーフレームの0%と、デフォルトのプロパティが同様でないといけないという事です。

CSS3は、特にエラー等も出力はしないので、気が付きにくいものなのですが、

「アニメ最初でカクつく。」と言った現象はこれをまず疑いましょう。

どういうことかと言いますと、ちょっと大げさに書きますが、

(ベンダープリフィックスは-webkit-のみを記述していきます。)

[code].hoge {
-webkit-transform: translate3d(50px,0,0);
-webkit-animation: anime01 linear 0.8s 1;
}[/code]

キーフレーム

[code]@-webkit-keyframes anime01 {
0% {
-webkit-transform: translate3d(100px,20px,0);
}
100% {
-webkit-transform: translate3d(200px,20px,0);
}
}[/code]

みたいな感じですね。

かなり大げさ(いい加減)に書いたのですが、animation指定のプロパティと 0%のプロパティが異なる時ですね。

「え」こんな風には書かないでしょ。

と思うのですが、Android端末では、キーフレームの最後でアニメを止める

-webkit-animation-fill-mode:forwards;

等が全てサポートされている訳ではありませんので、デフォルト(0%)をアニメの最後の位置に持ってきたりします。

animation-fill-modeに関してはこちらを参照ください。

css3 アニメーション animation-fill-mode

よって、上記の場合だと-webkit-transform: translate3d(100px,20px,0);が最終キーフレームとなってしまいます。

きちんと書くと、

[code].hoge {
-webkit-transform: translate3d(50px,0,0);
-webkit-animation: anime01 linear 0.8s 1;
}[/code]

キーフレーム

[code]@-webkit-keyframes anime01 {
0% {
-webkit-transform: translate3d(200px,20px,0);
}
0.01% {
-webkit-transform: translate3d(0,0,0);
}
100% {
-webkit-transform: translate3d(200px,20px,0);
}
}[/code]

100%までいくと、 0%が最終フレームとなるためこのように書きたいのですが、

これでは0%と初期値が異なるので

コレを避けて100%で止めたい場合、記述はこのようになります。

[code].hoge {
-webkit-transform: translate3d(200px, 20px,0);
-webkit-animation: anime01 linear 0.8s 1;
}[/code]

キーフレーム

[code]@-webkit-keyframes anime01 {
0% {
-webkit-transform: translate3d(200px,20px,0);
}
0.01% {
-webkit-transform: translate3d(0,0,0);
}
100% {
-webkit-transform: translate3d(200px,20px,0);
}
}[/code]

キーフレームのプロパティを省略しない

Android端末で多くのアニメ不具合が出ます。

大げさに書くと

[code]@-webkit-keyframes anime02 {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1.5);
opacity: 0;
}
10% {
-webkit-transform: translate3d(0, 0, 0) scale(1.1);
opacity: 1;
}
30% {
-webkit-transform: translate3d(40px, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1.4);
opacity: 0;
}
}[/code]

こんな感じですかね。30%で省略しているのが分かるかと思います。

変化のないプロパティでもきちんとキーフレーム内のプロパティは全部記述しましょう。

[code]@-webkit-keyframes anime02 {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1.5);
opacity: 0;
}
10% {
-webkit-transform: translate3d(0, 0, 0) scale(1.1);
opacity: 1;
}
30% {
-webkit-transform: translate3d(40px, 0, 0) scale(1.1);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, 0, 0) scale(1.4);
opacity: 0;
}
}[/code]

opacity 0は負荷高し

最後にopacity。

プラスドロップシャドウはレンダリングコストが非常にかかる。と覚えとくと良いでしょう。

opacityは0以上の場合、0になってしまい再度0以上にさせようとする時に負荷が高くなるようです。

[code]@-webkit-keyframes anime03 {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}[/code]

こういった点滅をさせたい時も、

[code]@-webkit-keyframes anime03 {
0% {
opacity: 1;
}
50% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}[/code]

と、0にしない工夫をすれば改善されたりします。

最後に

と、ざっと3つのポイントを書かせて頂きました。

この3つを守ればある程度いけるかと思います。(まだまだ沢山ありますが。。)

逆に、「おかしいな?」と症状が出た場合はこの3つのポイントから見ると良いかもしれませんね。

また、機会があればと。ではではぁー。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。