CSS3のanimationで心電図

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

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

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

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

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