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

どうも。

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

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

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

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

今回は、技術書にも多分書かれてなく学校なんかでも教えてはくれない（多分です。）大事なポイントを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つのポイントから見ると良いかもしれませんね。

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