MJ-WAVE.COM

  1. MJ-WAVE.COM
  2. Web開発
  3. CSS3とjavascriptで作るアニメーション

CSS3とjavascriptで作るアニメーション

ツイート
このエントリーをはてなブックマークに追加


CSS3でアニメーションを制御できるというのはもう有名な話ですね。スマホの普及や、ブラウザの性能の向上により、触れる機会も多くなったと思います。

もちろんjavascriptでもアニメーションは制御できます。jQueryなど使えばanimateメソッドで簡単にアニメーションを実装する事ができますから。

というか、CSS3だけで行うアニメーションは、単調な繰り返しのアニメーション、要素にホバーした際のアニメーション等、簡単なアニメーションしか現状では実現できません。また、レガシーブラウザなどでは実装できない等の問題があります。

じゃあCSS3でアニメーションすることにどんなメリットがあるのか。それはアニメーションの実行処理が軽いことと、スマホの存在です。現在出回っているスマホのほとんどがCSS3対応しており、スマホサイトでアニメーションを実装する際、CSSを用いた方が、処理が軽く。速いので、ユーザーにとってストレスが軽減されます。さらに、CSSのアニメーションをJavaScriptのイベント等で実行することで、自由度の高い、処理の軽いアニメーションが実現出来ます。

まずはjQueryのanimateメソッドを使ってアニメーションを実装してみます。基本的にはjQueryのanimateメソッドではtrasformプロパティを操作できないので、ここではleftプロパティを動かします。

jQueryのanimateメソッドを使ったアニメーション


アニメーション部分のコード

$('.jquery_circ').animate({
	left : '538px'
},1000,'swing');

次はCSS+JavaScriptでアニメーションしてみます。

ここではTransitionsを使い、transformプロパティを動かします。Transitionsには以下のプロパティがあります。

transition-property
アニメーションを設定するCSSプロパティを指定する。(width、left等)
transition-duration
アニメーションの始まりから終わりまでかかる時間を設定する(4秒なら「4s」、600ミリ秒なら「600ms」)
transition-timing-function
俗にいうイージング。詳しい値はこちらを参照してね。
transition-delay
アニメーションを開始するタイミングを遅らせる時間を設定する。

今回は、以下のようにCSSを記述しています。

.circ {
	position: absolute;
	top: 94px;
	left: 30px;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: ease;
}

transition、transformに対応しているブラウザでは、上記のようにベンダープレフィックスを付けないと現状では動かないので注意。またtransitionのプロパティ群は以下のようにまとめられます。なので、下のように書くのがおすすめです。

.circ {
	-webkit-transition: -webkit-transform 1s ease /* delayも記述できる */;
}

ちなみに複数のプロパティをアニメーションさせたかったらtransition-property部分に、allの値を入れます。

CSS+JavaScriptアニメーション

javascriptのコード部分は以下。ボタンのonclickイベントで実行しています。

function cssAnimationStart(){
	$('.circ').css('-webkit-transform','translate3d(508px,0,0)');
}

どうでしょう?多分SafariやGoogle Chromeで見ると、jQueryのanimateメソッドの方がきれいに見えると思います。でも、スマホやタブレット端末で見てみるとCSSアニメーションの方が滑らかではないでしょうか。(iPhone4Sとか新iPadだとあんまり変化を感じないかもしれない・・)CSSアニメーションの方はtransformプロパティをアニメーションしてるので、そのせいで滑らかなのもありますが、animateだと現状だとtransformを操作できないので。

追記:
尊敬する方からアドバイス頂いたのですが、iOSの場合、-webkit-transformの方が描画アクセラレータが有効になるので、-webkit-animationより軽くて早い。みたいですよ!
またiOSで-webkit-transformを使用してアニメーションがちらついてしまう(挙動がおかしい)場合は、値でtranslate3d()を使ったり、

.circ { -webkit-transform-style: preserve-3d; }

上記のように-webkit-transform-styleプロパティでpreserve-3dを指定して、「3D描画するよ!」と宣言してあげるとGPUアクセラレータが有効になって、ちらつきが無くなり動きもなめらかになります。

transitionはスタイルが変更された時、現在のスタイルから変更後のスタイルへ行くまでのディテールを指定するものです。なので、javascript側の実行部分はcssを変えるだけでいいので、処理が早いんですね。

こんな感じでアニメーションをCSSとjavascriptで制御することによって、スマートフォン、タブレット端末にも優しい、幅広いアニメーションが作れますね。

もし、この記事が役に立ったらシェアしてくださいね!

ツイート
このエントリーをはてなブックマークに追加

RECOMMEND BOOKS 筆者オススメ!! この記事に関連する書籍一覧

JavaScript 第5版

JavaScript 第5版

David Flanagan

JavaScriptをやるなら、必ず読んでおきたいJavaScriptのバイブル的な本。基礎知識から高度な部分まで幅広くカバーしてくれてます。

¥4,410(税込)

JavaScriptパターン ―優れたアプリケーションのための作法

JavaScriptパターン ―優れたアプリケーションのための作法

Stoyan Stefanov

JavaScriptにおける無駄のない効率のいいソースコードや、こんな風に書くのか!的な目からウロコな事がたくさん書いてある本。筆者イチオシ。

¥2,940(税込)

CSS3 スタンダード・デザインガイド

CSS3 スタンダード・デザインガイド

エ・ビスコム・テック・ラボ

タイトル通りCSS3についての本の中で「スタンダード」となりそうな本。定番から草案のプロパティ、ブラウザ独自プロパティ等、かなりの情報が網羅されてます。CSS3について知りたければこの本さえあれば正直いいかも。

¥2,940(税込)

CSS3デザインブック 仕事で絶対に使うプロのテクニック

CSS3デザインブック 仕事で絶対に使うプロのテクニック

MdN編集部

実践的な内容がメインです。「こうしたい時はこう」みたいな応用方法が載ってます。実践ノウハウが盛り込まれているので「なるほど!」と思える部分がいっぱいです。

¥2,940(税込)

現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript]

現場のプロが教える スマートフォンサイト 制作ガイドブック [HTML5&CSS3&JavaScript]

松田 直樹、宮山 純

当ブログ管理人の宮山が初めて執筆に参加した書籍。実際の制作の現場で培ったノウハウや、スマートフォンサイトの設計・デザインのポイント、サイトの軽量化など、充実した内容になったかなと思います。レビューを頂ける場合は甘口でお願いします。

¥2,625(税込)

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

谷拓樹

iOSに特化したスマホサイト制作ガイド。実際の内容はAndroidでも使える内容も豊富なので、スマホサイトを制作する上で読んでおいて損はなし。

¥2,310(税込)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

たにぐちまこと

スマートフォンサイト制作における入門本。スマホサイト制作において大事な設計から基本的なマークアップ、応用まで盛り込まれているので入門本として最適な本。

¥2,499(税込)