zfb
GitHub リポジトリ

検索したい単語を入力

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

トランジション

トランジション対象のプロパティ群と組み込みのタイミング初期値を選びます。

状態や値が変わったときに滑らかに変化させる CSS プロパティを選びます。hover や focus-visible などの状態バリアントと、実際に操作できる要素に組み合わせます。

クラスと CSS の早見表

クラスの例期待される宣言
transition-colorstransition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke; transition-duration: 150ms; transition-timing-function: ease;
例の設定

すべてのプレビューで spec: 1、reset: "none"、strict モード、spacingUnit: "0.25rem"、空のブレークポイント、defaultTransitionTimingFunction: "ease" を明示します。transition-none 以外のトランジション系ユーティリティは 150ms と設定済みのタイミング関数を使います。ボタンはポインターの hover とキーボードの focus の両方に反応します。prefers-reduced-motion が reduce の場合は、自作デモ CSS が時間を 0 にします。ユーティリティの例は短く、操作したときだけ変化します。

使い方の例

hover とキーボードフォーカスに反応する

transition-colors は組み込みの 150ms と ease を使い、hover または focus-visible でボタンの背景色を変えます。

hover とキーボードフォーカスに反応する
HTML
<div class="wind-demo-motion"><button type="button" class="wind-demo-trigger transition-colors hover:bg-[#dbeafe] focus-visible:bg-[#dbeafe]">Save changes</button></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.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-colors {
  transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .hover\:bg-\[\#dbeafe\]:hover {
    background-color: #dbeafe;
  }
}
.focus-visible\:bg-\[\#dbeafe\]:focus-visible {
  background-color: #dbeafe;
}
この例の設定
{
  "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-colors",
        "hover:bg-[#dbeafe]",
        "focus-visible:bg-[#dbeafe]"
      ]
    }
  }
}
デモ用の自作 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; } }

対象のプロパティを一つ選ぶ

transition-[border-color] で対象を絞り、focus と hover で境界線の色を変えます。

対象のプロパティを一つ選ぶ
HTML
<div class="wind-demo-motion"><button type="button" class="wind-demo-trigger transition-[border-color] hover:border-[#1d4ed8] focus-visible:border-[#1d4ed8]">Show the outline change</button></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.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-\[border-color\] {
  transition-property: border-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
@media (hover: hover) {
  .hover\:border-\[\#1d4ed8\]:hover {
    border-top-color: #1d4ed8;
    border-right-color: #1d4ed8;
    border-bottom-color: #1d4ed8;
    border-left-color: #1d4ed8;
  }
}
.focus-visible\:border-\[\#1d4ed8\]:focus-visible {
  border-top-color: #1d4ed8;
  border-right-color: #1d4ed8;
  border-bottom-color: #1d4ed8;
  border-left-color: #1d4ed8;
}
この例の設定
{
  "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-[border-color]",
        "hover:border-[#1d4ed8]",
        "focus-visible:border-[#1d4ed8]"
      ]
    }
  }
}
デモ用の自作 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; } }

補間を止める

transition-none を使うと同じ状態変化が即時に切り替わります。時間とタイミング関数の宣言は出力しません。

補間を止める
HTML
<div class="wind-demo-motion"><button type="button" class="wind-demo-trigger transition-none hover:bg-[#dbeafe] focus-visible:bg-[#dbeafe]">Change without interpolation</button></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.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-none {
  transition-property: none;
}
@media (hover: hover) {
  .hover\:bg-\[\#dbeafe\]:hover {
    background-color: #dbeafe;
  }
}
.focus-visible\:bg-\[\#dbeafe\]:focus-visible {
  background-color: #dbeafe;
}
この例の設定
{
  "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-none",
        "hover:bg-[#dbeafe]",
        "focus-visible:bg-[#dbeafe]"
      ]
    }
  }
}
デモ用の自作 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; } }

任意値と名前付きの値

使えるキーワードは transition、transition-all、transition-colors、transition-opacity、transition-shadow、transition-transform、transition-none です。transition-[border-color] のように任意のプロパティリストも指定できます。組み込みの名前付き transition-property トークンはありません。transition-none は transition-property: none だけを出力し、時間やイージングの初期値は設定しません。

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

カタログの詳細

transition

フィールド値
カタログ識別子v1.transition
クラスパターンtransition or transition-<suffix>
文法{"acceptedKinds":["keyword","arbitrary"],"arbitraryProperty":"transition-property","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値7
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位transition (35)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティtransition-property, transition-duration, transition-timing-function

受け入れる値

種類接尾辞出力される値
keywordnull"all"
keyword"all""all"
keyword"none""none"
keyword"colors""color,background-color,border-color,outline-color,text-decoration-color,fill,stroke"
keyword"opacity""opacity"
keyword"shadow""box-shadow"
keyword"transform""transform,translate,rotate,scale"

宣言テンプレート

プロパティ値の種類固定値
transition-propertyresolvednull
transition-durationtransitionDurationnull
transition-timing-functiontransitionTimingFunctionnull

カタログの例

クラスの例期待される宣言
transition-colorstransition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke; transition-duration: 150ms; transition-timing-function: ease

Revision History

作成更新