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

Archives Details

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

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つのポイントから見ると良いかもしれませんね。

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

Comment

Related Article

CSS ファイル簡単生成。APBCSS ファイルジェネレーターツール「APB CLI」の使い方。

2017.06.18

「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。

2016.06.11

「CSSが難しい。。」「CSSが面倒。。」 と言ったエンジニアさんにもオススメのCSS設計! 「APBCSS(Atomic Parts Base CSS)」が良い感じ!

2016.03.28

2016年は「AtomicDesign」を取り入れた「APB CSS(Atomic Parts Base CSS)」で迷わず、簡単、拡張性持った CSS設計を!

2016.01.02

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

2014.08.25

フロントエンド パフォーマンス向上について まとめ

2014.01.07

前回に続いて、SPEC vol.4で3位受賞しました。

2012.07.28

前回に続いて、SPEC vol.4に参加しております。

2012.07.15

CSS3のみでAjax風 ページネーション(ページ送り) JavaScript無し

2012.06.03

CSSでフォームパーツ(input,checkbox,etc…)をカスタマイズ

2012.06.03

CATEGORY LIST

LATEST NEWS

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

Amazon 87時間のビックセール タイムセール祭りで購入したもの

イベント

2019.04.23

Androidに Linuxを簡単にインストールするアプリ「UserLAnd」

Linux

2019.04.16

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

JavaScript

2019.03.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US