君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA

ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています

[mayumayu_nimolove]

みんなこれ手書きで作ってるの？。昔のFlashみたいなツールないのかな。ちなみにFlashが廃れた理由にアニメーションいらないってのがあったけどそれは今はいいのか。

[latena]

offset-path という CSS プロパティがあってだな... https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path

[d4-1977]

使い分けできるぐらいにアニメーションを作ったことがないけれど、なんか楽しくなっちゃうんですよね。

[tossy_yukky]

覚えとこ

[bleu-bleut]

「htmlと親和性が高く簡単に使えるCSS」「パスや図形描画に秀でたSVG」「GPUを使った高速なピクセル演算が特徴のCanvas（WebGL）」

[m_m3zono]

それぞれの特徴点が分かりやすくまとめられていて良いですね。

[t_f_m]

あとで

[kathew]

面白い

[satotaka99]

CSSだけでもけっこう動かせるものですね

[toge]

とても良い！

[laptice]

webにおけるアニメーション技術の得意不得意一覧表。

[tk_musik]

PIXIって便利なんだなぁ！