1. 过渡 & 动画
  2. transition-property

过渡 & 动画

transition-property

用于控制 CSS 属性过渡的实用工具。

样式
transition
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */
transition-all
transition-property: all; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */
transition-colors
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */
transition-opacity
transition-property: opacity; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */
transition-shadow
transition-property: box-shadow; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */
transition-transform
transition-property: transform, translate, scale, rotate; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */
transition-none
transition-property: none;
transition-(<自定义属性>)
transition-property: var(<自定义属性>); transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */
transition-[<值>]
transition-property: <值>; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */

示例

基本示例

使用 transitiontransition-colors 等实用工具来指定更改时应过渡的属性

悬停在按钮上以查看预期行为

<button class="bg-blue-500 transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 ...">  Save Changes</button>

支持减少运动

对于用户指定他们偏好减少运动的情况,可以使用 motion-safemotion-reduce 变体有条件地应用动画和过渡

<button class="transform transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none ...">  <!-- ... --></button>

使用自定义值

使用 transition-[<值>] 语法 来设置过渡属性基于完全自定义的值

<button class="transition-[height] ...">  <!-- ... --></button>

对于 CSS 变量,您还可以使用 transition-(<自定义属性>) 语法

<button class="transition-(--my-properties) ...">  <!-- ... --></button>

这只是 transition-[var(<自定义属性>)] 的简写,它会自动为您添加 var() 函数。

响应式设计

前缀一个 transition-property 实用工具 带有像 md: 这样的断点变体,仅在中等 屏幕尺寸及以上应用该实用工具

<button class="transition-none md:transition-all ...">  <!-- ... --></button>

变体文档中了解有关使用变体的更多信息。

Copyright © 2025 Tailwind Labs Inc.·商标政策