題名のとおりですが、アニメーションを実装する際、jsでやらずに、
cssでanimationやtransitionを使うメリットってなんでしょうか。
jqueryを使えば、比較的簡単にアニメーションを実装できますし、
わざわざcssで、animationやtransitionを使う必要性がない気がします。
cssでこれらを使うメリット、
または、javascriptでのアニメーション実装とのすみわけなど、
ご存じの方教えてください。
cssのeaseって、jqueryで同じような事をしたかったらプラグイン使うしかないんでしょうか・・
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

回答5件
0
元々、視覚効果は CSS の役割でした。
jQuery 等の JavaScript によるアニメーションが流行したのは旧来からある MS IE6 がいつまでも生き残り続けたからです。
animation, transition をサポートするブラウザは IE10+ であり、当時は IE が絶大なブラウザシェアを誇っていた事からとても CSS3 を使える状況ではなかった為、JavaScript で代用される傾向にありました。
現在では IE7+ が MS のサポート対象になり、幾分、CSS への移行が進んでいますが、それでも完全ではない為、CSS と JavaScript を併用するWeb製作者も残っていると思います(CSS がサポートされないブラウザだけ JavaScript で実装します)。
MS のサポートポリシーとしては2017年4月11日に IE9 のサポートが終了する為、それまでは CSS と JavaScript を併用する傾向は続くと思われます。
ところで、質問者さんは jQuery で簡単に実装できると仰っていますが、実際のコードは何行にも及ぶ為、簡単ではないと思います。
また、jQuery 使用者が全てではありませんので、一からコードを書くとそれなりに手間です。
CSS で実装できると JavaScript 側から操作するコードも短くなる為、Web製作者の負担は確実に減ります。
投稿2015/08/25 11:25
編集2015/08/25 11:28総合スコア18194
0
他の方が詳しく書いてくださってますが、
CSSのtransitionやanimationの方が処理が速い=軽い・動きがなめらか、というのがCSSを使うメリットです。
ではjsでアニメーションさせるメリットは何かというと、
「クロスブラウザでアニメーションさせることができる」なのではないかな、と思います。
CSS3のtransitionやanimationなどの機能は、IE10以上からの対応となりますので、
IE9以下でもアニメーションさせたかったらJSでやるしかありません。
jQueryを使えば簡単なメソッドでサクッとアニメーションさせることができますから、
昔は重宝したものです。
それ以外でJSアニメーションさせるメリットがあるとしたら、、、何でしょう?
詳しい方お願いします(苦笑)
投稿2015/08/25 09:36
総合スコア3763
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

0
ベストアンサー
レンダリング処理をする際、jsはCPUだけで処理しますが、CSSはGPUを併用して処理します。なので、簡単に言うとjsでのアニメーションより「滑らか」な動きになります。PCのようなハイスペックな端末であれば、体感的にそれほど違いはありませんが、スマフォのような端末ではかなり差がでます。iPhoneのように高スペックな端末ならそこそこ滑らかに動きますが、一部の低スペックなAndroid端末とかだとjQueryでアニメーションさせると動きがカクカクになったりします。
時系列的に言うと、いままではjsでしか実現できなかったアニメーションがCSS3でできるようになった!やっほーーいっ!ってことだと思います。
そんなに複雑ではなく、cssで実現できるアニメーションをjsで実装するメリットは質問者様のおっしゃるとおり「簡単・早い」以外には特にないように思いますが、僕は経験の浅いエンジニアなので、もし、あるならぜひ自分も聞きたいです。特別な理由がなければアニメーションは可能な限りCSSでやったほうが良いとおもいます。
jqueryでのeasingはプラグインがあります
jQuery Easing Plugin (version 1.3)
投稿2015/08/24 20:12
編集2015/08/24 20:28
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

0
CSS3でアニメーションを定義してdelayで連鎖しているように見せる場合は、ずれる事があるので、
JSでアニメーションの終了を取得してanimationを別途発火させる方が正確かなと思います。
PCでのレガシーブラウザ対応が必要な場合はJS
タイミングを計る必要性が薄いものはCSS3
タイミングが重要なものはJS+CSS3
値の計算が必要なものは主にJS
対象環境で実行して重たい場合はCSS3に変更検討
って感じですかね。
投稿2015/08/31 10:46
編集2015/08/31 10:54総合スコア25
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/25 11:55 編集
2015/08/25 12:27