CSSでアニメーションしたいときに見ておくと良い記事とかいろいろ

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

CSSでアニメーションしたいときに見ておくと良い記事とかいろいろ

CSSでのアニメーションしていますか?多分スマートフォンのサイトでよく使われると思います。んで、たまにカクカクして全然滑らかに動いてくれないときありませんか?そんなときに読んでおくといい記事を集めてみました。あと、ついでによく使われるUIの実装方法とアニメーションフレームワークもあるので参考にしてみてください。

ブラウザの対応状況

HTML5 & CSS3 Web Design

http://fmbip.com/litmus/

http://fmbip.com/litmus/

ドロワーなどでよくあるメニューをスライドさせたりするときに使うtransitions、transformsについてはChrome、safari、FireFoxなどではほぼほぼ対応可能です。
IEについてはIE10からなのでPCでの対応は厳しそうですね。

なので、CSSでのアニメーションを使う機会はスマートフォンのサイトを作るときにがメインになります。

滑らかに動かない時に読んでおくべき記事

PCだと滑らかにアニメーションしているのに、スマホだとカクカクしているなんてことがよくあります。スマホはまだまだPCに比べたらスペック低いですからね。しょうがない部分ではあります。

ただ、以下に挙げた記事を参考にしていただくと滑らかに動かすことができます。ぜひぜひ参考にしてくださいね。

jQuery.animate vs CSS.transition : まだプログラマーですが何か?

http://dotnsf.blog.jp/archives/1000071340.html

http://dotnsf.blog.jp/archives/1000071340.html

スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ!(Frontrend Adven3 Calendar 2013 – 06日目) | Ginpen.com

http://ginpen.com/2013/12/06/hardware-acceleration/

http://ginpen.com/2013/12/06/hardware-acceleration/

Web制作にGPU処理を取り入れる

https://w3g.jp/blog//web_gpu_adopt

https://w3g.jp/blog//web_gpu_adopt

すぐ真似できるCSSのアニメーション

よくUIで使われるものを集めてみました。僕もよく使うものです。基本的にはjQuery+CSS3って感じですね。ボタンがクリックされたらjQueryでクラスを付与して、アニメーションはCSSで!

CSSだけで動きのあるアコーディオン・メニュー | Ri-mode Rainbow

http://ri-mode.com/rainbow/2014/06/20/css_accordion_menu/

http://ri-mode.com/rainbow/2014/06/20/css_accordion_menu/

CSS3のアニメーションで動くドロワーをプラグイン無しで実装してみる

http://increment-log.com/css-transition-drawer/

http://increment-log.com/css-transition-drawer/

CSS(CSS3)のみでLightbox風モーダルウィンドウを作成する方法 | BlackFlag

http://black-flag.net/css/20110201-2506.html

http://black-flag.net/css/20110201-2506.html

CSSのみで実装するボタンデザインやホバーエフェクト 20+α | NxWorld

http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html

http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html

おすすめのアニメーション用フレームワーク

最後にアニメーションのフレームワークを集めてみました。

Animate.css

http://daneden.github.io/animate.css/

http://daneden.github.io/animate.css/

Magic Animations CSS3

http://www.minimamente.com/example/magic_animations/

http://www.minimamente.com/example/magic_animations/

Effeckt.css

http://h5bp.github.io/Effeckt.css/

http://h5bp.github.io/Effeckt.css/

CSS3 Animation Cheat Sheet – Justin Aguilar

http://www.justinaguilar.com/animations/index.html

http://www.justinaguilar.com/animations/index.html

おわりに

PCではIEのせいでまだまだ対応ができない部分はありますが、スマートフォンでは僕の経験上jQueryのアニメーションよりもCSSのアニメーションの方が滑らかに動きます。もちろんやり方次第ですが・・・。今後、CSSアニメーションの活躍の場は広がっていくのでこれを機に正しいアニメーションのやり方を勉強してみてくださいね。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

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

同じカテゴリーの記事

ページの先頭へ