Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

実例から学ぶ CSSアニメーション

DIST.15 「アニメーションで差を付ける演出とデザイン」 に参加して、LT をする。

なぜ LT をするか

CSS Transition や CSS Animation の使い方がわかっても、実際に活用するイメージが限定的な場面でしか思いつかなかった。

たとえば、CSS アニメーションを使うシーンとしてはリンクやボタンのマウスオーバー、ローディングとかまではイメージつくけど、その先が思いつかない。また、Codepen とかにあるデモは見た目は派手で格好いいけど、活用シーンが限られていたり、まったく現実的じゃないものが多い。

この状態では日々の製作に活かしづらいと思ったので、今回の LT を通して、CSS アニメーションに対する自分の視野を広げてみようと思った。

資料

speakerdeck.com

デモ

  • 認知補助
    • Backlog ぽいやつ
      • アニメーションの効果で、ログインボタンからダイアログがでてくるのがわかりやすくなります。矢印の装飾をつけるだけよりも、ダイアログがどこからでてきたか記憶しやすいです。
      • DEMO
  • つなぎ
    • Medium ぽいやつ
      • ページを読み込んでから画像表示するまでの退屈な時間を、ぼかしのアニメーションを使ってつないでいます。「見えそうで見えない」状態を作ることで、画像への注目度もあげています。
      • DEMO
  • ただの演出
    • おそ松さん ぽいやつ
      • ブルブル演出です。サイトの印象に関わります。
      • DEMO