Q&A
クロスブラウザ対応するためにjsを使うとよいということですね。
有難うございます。
題名のとおりですが、アニメーションを実装する際、jsでやらずに、
cssでanimationやtransitionを使うメリットってなんでしょうか。
jqueryを使えば、比較的簡単にアニメーションを実装できますし、
わざわざcssで、animationやtransitionを使う必要性がない気がします。
cssでこれらを使うメリット、
または、javascriptでのアニメーション実装とのすみわけなど、
ご存じの方教えてください。
cssのeaseって、jqueryで同じような事をしたかったらプラグイン使うしかないんでしょうか・・
回答5件
3
元々、視覚効果は 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
2
他の方が詳しく書いてくださってますが、
CSSのtransitionやanimationの方が処理が速い＝軽い・動きがなめらか、というのがCSSを使うメリットです。
ではjsでアニメーションさせるメリットは何かというと、
「クロスブラウザでアニメーションさせることができる」なのではないかな、と思います。
CSS3のtransitionやanimationなどの機能は、IE10以上からの対応となりますので、
IE9以下でもアニメーションさせたかったらJSでやるしかありません。
jQueryを使えば簡単なメソッドでサクッとアニメーションさせることができますから、
昔は重宝したものです。
それ以外でJSアニメーションさせるメリットがあるとしたら、、、何でしょう？
詳しい方お願いします（苦笑）
投稿2015/08/25 09:36
総合スコア3763
2
ベストアンサー
レンダリング処理をする際、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
CSSはjsでのアニメーションより「滑らか」なんですね。
そういえば、スマホで動かしたときとか、そんな感じがします。
勉強になりました！有難うございます。
jqueryでアニメションするとカクカクなっちゃうので、
定義できるものはcssに定義、
jqueryで登録したイベントで、cssに定義したアニメーションを(addClass等で)
呼び出すようにしたいと思いました。
jqueryで書いたアニメーションがスマホ等で意図したように動かない理由が
良く分かりました。（プログレスバーのアニメションが貞子のような動きになって
困っていました）アニメーションにcssを使うメリットも分かりました
1
CSS3でアニメーションを定義してdelayで連鎖しているように見せる場合は、ずれる事があるので、
JSでアニメーションの終了を取得してanimationを別途発火させる方が正確かなと思います。
PCでのレガシーブラウザ対応が必要な場合はJS
タイミングを計る必要性が薄いものはCSS3
タイミングが重要なものはJS＋CSS3
値の計算が必要なものは主にJS
対象環境で実行して重たい場合はCSS3に変更検討
って感じですかね。
投稿2015/08/31 10:46
編集2015/08/31 10:54
総合スコア25
ついでに、eventによってアニメーションさせたい場合は、
$('イベントを拾いたいセレクタ').on('イベント',function(){
$('アニメーションさせたいセレクタ').addClass('アニメーション開始用のセレクタ');
});
とかするとイベントが起こったらアニメーションされます。
概ね各ブラウザはCSS上のセレクタが成立した時点でアニメーションが開始される実装になっている様子です。
easeについて
今のところ
CSS3で
cubic-bezier(0.47, 0, 0.745, 0.715)
↑こんな書式で細かい指定はできますが、
Elastic系,Bounce系のeaseはCSS3では指定できないようです。
JSでアニメーションの終了を取得して次のアニメーションを指定するとかすれば実装できそうですが、生産性がよろしくないような予感がします。
JSでは大体Jqueryのプラグインを使ってますが、
”easingなんて書くの簡単なんだから自分で書けばいいさ”的な書き込みを
海外の掲示板でよく見るような気がするので、
プラグインがよろしくないとお思いであれば、
必要なものだけ自前で書くなり
オリジナルのeasingを書いてみるなり
にチャレンジされてもよろしいかと思います。
0
第一jQuery使ってアニメーション表現するよりCSSの方が簡単で、高度な事が出来る
「わざわざcssで」と言ってますが、私からしては、わざわざjQueryでって話になります。
投稿2015/08/28 07:10
総合スコア228
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/25 11:55 編集
2015/08/25 12:27