zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

イージング

設定済みイージングトークンまたは任意のタイミング関数を指定します。

開始値から終了値へ変わるときの加速と減速を決め、トランジションの進み方を選びます。

クラスと CSS の早見表

クラスの例期待される宣言
ease-gentletransition-timing-function: var(--zw-ease-gentle);
例の設定

すべてのプレビューで spec: 1、reset: "none"、strict モード、spacingUnit: "0.25rem"、空のブレークポイント、defaultTransitionTimingFunction: "ease" を明示します。名前付きの例では tokens.easings.gentle に cubic-bezier(0.2, 0, 0, 1) を設定し、もう一つの例では CSS のタイミング関数を直接使います。どちらも 300ms で 8px だけ動き、hover と focus-visible で操作できます。prefers-reduced-motion の利用者には自作デモ CSS が時間を 0 にします。

使い方の例

再利用する曲線に名前を付ける

プレビュー設定で tokens.easings.gentle を定義し、ease-gentle で 300ms の移動に適用します。

再利用する曲線に名前を付ける
HTML
<div class="wind-demo-motion"><button type="button" class="wind-demo-trigger transition-transform duration-300 ease-gentle hover:translate-x-[8px] focus-visible:translate-x-[8px]">Configured gentle curve</button></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-ease-gentle: cubic-bezier(.2, 0, 0, 1);
    --zw-spacing-unit: .25rem;
  }
}
@property --zw-translate-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --zw-translate-y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
.wind-demo-motion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  max-width: 38rem;
  color: #24364b;
  font: 15px / 1.5 system-ui, sans-serif;
}

.wind-demo-motion button {
  min-width: 9rem;
  border: 1px solid #526477;
  border-radius: .35rem;
  background: #eef3f8;
  color: inherit;
  padding: .65rem .9rem;
  font: inherit;
  text-align: left;
}

.wind-demo-motion button:focus-visible {
  outline: 3px solid #1670b8;
  outline-offset: 3px;
}

.wind-demo-motion .wind-demo-trigger {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .wind-demo-motion .wind-demo-trigger {
    transition-duration: 0s !important;
  }
}
.transition-transform {
  transition-property: transform,translate,rotate,scale;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-gentle {
  transition-timing-function: var(--zw-ease-gentle);
}
@media (hover: hover) {
  .hover\:translate-x-\[8px\]:hover {
    --zw-translate-x: 8px;
    translate: var(--zw-translate-x) var(--zw-translate-y);
  }
}
.focus-visible\:translate-x-\[8px\]:focus-visible {
  --zw-translate-x: 8px;
  translate: var(--zw-translate-x) var(--zw-translate-y);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "easings": {
        "gentle": "cubic-bezier(0.2, 0, 0, 1)"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-motion": true,
      "wind-demo-trigger": true
    },
    "safelist": {
      "docs-preview": [
        "transition-transform",
        "duration-300",
        "ease-gentle",
        "hover:translate-x-[8px]",
        "focus-visible:translate-x-[8px]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-motion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; max-width: 38rem; color: #24364b; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-motion button { min-width: 9rem; border: 1px solid #526477; border-radius: 0.35rem; background: #eef3f8; color: inherit; padding: 0.65rem 0.9rem; font: inherit; text-align: left; }
.wind-demo-motion button:focus-visible { outline: 3px solid #1670b8; outline-offset: 3px; }
.wind-demo-motion .wind-demo-trigger { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .wind-demo-motion .wind-demo-trigger { transition-duration: 0s !important; } }

一度だけ使うタイミング関数

ease-[steps(3,end)] は変化を三段階で見せます。hover とキーボードフォーカスの両方で確認できます。

一度だけ使うタイミング関数
HTML
<div class="wind-demo-motion"><button type="button" class="wind-demo-trigger transition-transform duration-300 ease-[steps(3,end)] hover:translate-x-[8px] focus-visible:translate-x-[8px]">Three deliberate steps</button></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
@property --zw-translate-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --zw-translate-y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
.wind-demo-motion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  max-width: 38rem;
  color: #24364b;
  font: 15px / 1.5 system-ui, sans-serif;
}

.wind-demo-motion button {
  min-width: 9rem;
  border: 1px solid #526477;
  border-radius: .35rem;
  background: #eef3f8;
  color: inherit;
  padding: .65rem .9rem;
  font: inherit;
  text-align: left;
}

.wind-demo-motion button:focus-visible {
  outline: 3px solid #1670b8;
  outline-offset: 3px;
}

.wind-demo-motion .wind-demo-trigger {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .wind-demo-motion .wind-demo-trigger {
    transition-duration: 0s !important;
  }
}
.transition-transform {
  transition-property: transform,translate,rotate,scale;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-\[steps\(3\,end\)\] {
  transition-timing-function: steps(3,end);
}
@media (hover: hover) {
  .hover\:translate-x-\[8px\]:hover {
    --zw-translate-x: 8px;
    translate: var(--zw-translate-x) var(--zw-translate-y);
  }
}
.focus-visible\:translate-x-\[8px\]:focus-visible {
  --zw-translate-x: 8px;
  translate: var(--zw-translate-x) var(--zw-translate-y);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-motion": true,
      "wind-demo-trigger": true
    },
    "safelist": {
      "docs-preview": [
        "transition-transform",
        "duration-300",
        "ease-[steps(3,end)]",
        "hover:translate-x-[8px]",
        "focus-visible:translate-x-[8px]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-motion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; max-width: 38rem; color: #24364b; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-motion button { min-width: 9rem; border: 1px solid #526477; border-radius: 0.35rem; background: #eef3f8; color: inherit; padding: 0.65rem 0.9rem; font: inherit; text-align: left; }
.wind-demo-motion button:focus-visible { outline: 3px solid #1670b8; outline-offset: 3px; }
.wind-demo-motion .wind-demo-trigger { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .wind-demo-motion .wind-demo-trigger { transition-duration: 0s !important; } }

任意値と名前付きの値

組み込みの名前付きイージング値はありません。tokens.easings に値を設定し、ease-gentle のように ease-<name> で参照します。ease-[steps(3,end)] のような任意形式には、CSS のタイミング関数を一つ指定できます。wind.defaultTransitionTimingFunction にはトークン名ではなく CSS のキーワードまたは関数を指定します。同じバリアント区画では、明示した ease-* がこの初期値を上書きします。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

ease

フィールド値
カタログ識別子v1.ease
クラスパターンease-<suffix>
文法{"acceptedKinds":["token","arbitrary"],"arbitraryProperty":"transition-timing-function","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値この項目には独立した値の定義がありません。
トークンカテゴリeasings
負の値の規則forbidden
競合グループと順位easing (37)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティtransition-timing-function

受け入れる値

この項目には独立した値の定義がありません。

宣言テンプレート

プロパティ値の種類固定値
transition-timing-functionresolvednull

カタログの例

クラスの例期待される宣言
ease-[ease-in]transition-timing-function: ease-in

Revision History

作成更新