CSS3のanimationの練習と手慰みとして、心電図モニターのアニメを作ってみた。動作とソースはDEMOをご覧いただきたい。

ところで、CSS3のアニメーションの方がjQueryよりも動作が軽い、というのは誤解だ。

ブラウザがCSSだけでアニメーションしてくれれば、javascriptを使わないで済むが、それは制作がシンプルになるのであって、動作が軽い訳ではない。例えば現状ではCSSのグラデーションとアニメーションを組み合わせると、描画スピードが落ちたり、アニメがカクカクしたりする。

イメージとしてはjavascriptがやっていたアニメーションの処理が、ブラウザに内蔵された感じ。どっちにしろPCのリソースを越えて処理が軽くなる訳ではない。

近年、各ブラウザベンダーは、javascriptの処理速度の競争を行なってきた。今後は当然、CSSの処理速度が注目されて行くだろうから、CSS3のアニメーションも、もっと使える様になるはずだ。

ディスカッションに参加

3件のコメント

  1. どうやったら動くのでしょうか?
    OS 10.4.11
    firefox 3.6

    もしかして静止画だったりして?

  2. 嘘。Winの新しいffで見れた。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください