CSS3のanimationで 心電図

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

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

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

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

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

カテゴリー: css3 タグ: , , パーマリンク

シェア

CSS3のanimationで 心電図 への3件のフィードバック

  1. きんた のコメント:

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

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

  2. きんた のコメント:

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

  3. ksk のコメント:

    Firefoxはver.5からanimetionに対応したので。
    https://developer.mozilla.org/ja/CSS/animation

コメントを残す

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

CAPTCHA