Skip to content

Instantly share code, notes, and snippets.

@beijaflor

beijaflor/guideline-for-css-animation.markdown

Last active September 2, 2021 15:17
Show Gist options
  • Save beijaflor/308656edaf4ee5199bb0f043c823e22e to your computer and use it in GitHub Desktop.
Save beijaflor/308656edaf4ee5199bb0f043c823e22e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
guideline-for-css-animation.markdown

CSS アニメーションガイドライン

元ネタ

リズム（duration / delay）

  • アニメーションは短く、意味がわかる長さに
  • 200ms〜500ms
  • 変数を使う

メロディ（effect / easing）

  • 適切なイージングを選ぶ
  • 加速も減速も0を起点に
  • スタート->強調->終了
  • cubic-bezier(_, 0, _, 1);
  • @keyframesで調整

ハーモニー（group / sequence）

  • メインの動きを決める
  • やりすぎない
  • デュレーションとイージングを揃える
  • グループ、順序、配置、ループ
  • Animation-delayに気をつける
  • Start-offset, duration, end-offset
  • percentage($offset / $duration)
  • ループには@forを使う
  • $mapsのループには@eachを使う

フォーム（theme / storyboard）

  • 変形は同時に
  • アニメーションは色など毎に分ける

元ネタ2

UIにおける動きのルール

  • それぞれの動きがどのようにユーザーに恩恵（探しやすい・見つけやすい・気づきやすい・つながりがわかる）を与えるのか説明できるようにする
  • "いい感じ"を品質とは言わない
  • アニメーションの長さは300ms以内にする
  • イージングにはリニアを使わない（動きが緩慢で無気力、機械的に見える）
  • 99%のアニメーションはシンプルな"Ease-In"か"Ease-Out"を使うべき
  • スプリングやバウンスといったアニメーションは限られた状況だけで必要になる
Raw
guideline-for-good-microinteraction.markdown

マイクロインタラクションベストプラクティス

元ネタ

習慣を作る

  • キュー -> ルーティン -> ご褒美
  • 例: Facebook の通知

テーマに合わせる

  • 連続性
  • 予測可能性

アニメーションをフィードバックとして使う

  • 機能的アニメーション
  • 楽しませるアニメーション

ユーモアを

  • エモーショナルに
  • 親しみを感じてもらう

望まないインタラクションを提供しない

  • 複雑にならないように
  • KISS - Keep Is Simple and Stupid -
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment