CSS3のanimationで 心電図

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

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

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

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

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

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

シェア

3 Responses to CSS3のanimationで 心電図

コメントを残す

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

CAPTCHA


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