CSS3アニメーション をスマートフォンサイトで 綺麗に作りたいあなたへ
2014.08.25
この記事は最終更新日から1年以上が経過しています。
どうも。
お手紙みたいな題名になって申し訳ありません。
今更感たっぷりなところもあるのですが、これから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-のみを記述していきます。)
.hoge { -webkit-transform: translate3d(50px,0,0); -webkit-animation: anime01 linear 0.8s 1; }
キーフレーム
@-webkit-keyframes anime01 { 0% { -webkit-transform: translate3d(100px,20px,0); } 100% { -webkit-transform: translate3d(200px,20px,0); } }
みたいな感じですね。
かなり大げさ(いい加減)に書いたのですが、animation指定のプロパティと 0%のプロパティが異なる時ですね。
「え」こんな風には書かないでしょ。
と思うのですが、Android端末では、キーフレームの最後でアニメを止める
-webkit-animation-fill-mode:forwards;
等が全てサポートされている訳ではありませんので、デフォルト(0%)をアニメの最後の位置に持ってきたりします。
animation-fill-modeに関してはこちらを参照ください。
css3 アニメーション animation-fill-mode
よって、上記の場合だと-webkit-transform: translate3d(100px,20px,0);が最終キーフレームとなってしまいます。
きちんと書くと、
.hoge { -webkit-transform: translate3d(50px,0,0); -webkit-animation: anime01 linear 0.8s 1; }
キーフレーム
@-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); } }
100%までいくと、 0%が最終フレームとなるためこのように書きたいのですが、
これでは0%と初期値が異なるので
コレを避けて100%で止めたい場合、記述はこのようになります。
.hoge { -webkit-transform: translate3d(200px, 20px,0); -webkit-animation: anime01 linear 0.8s 1; }
キーフレーム
@-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); } }
キーフレームのプロパティを省略しない
Android端末で多くのアニメ不具合が出ます。
大げさに書くと
@-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; } }
こんな感じですかね。30%で省略しているのが分かるかと思います。
変化のないプロパティでもきちんとキーフレーム内のプロパティは全部記述しましょう。
@-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; } }
opacity 0は負荷高し
最後にopacity。
プラスドロップシャドウはレンダリングコストが非常にかかる。と覚えとくと良いでしょう。
opacityは0以上の場合、0になってしまい再度0以上にさせようとする時に負荷が高くなるようです。
@-webkit-keyframes anime03 { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
こういった点滅をさせたい時も、
@-webkit-keyframes anime03 { 0% { opacity: 1; } 50% { opacity: 0.1; } 100% { opacity: 1; } }
と、0にしない工夫をすれば改善されたりします。
最後に
と、ざっと3つのポイントを書かせて頂きました。
この3つを守ればある程度いけるかと思います。(まだまだ沢山ありますが。。)
逆に、「おかしいな?」と症状が出た場合はこの3つのポイントから見ると良いかもしれませんね。
また、機会があればと。ではではぁー。