过渡和动画
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-(<custom-property>) | transition-property: var(<custom-property>);
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-[<value>] | transition-property: <value>;
transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--default-transition-duration); /* 150ms */ |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 transition 和 transition-colors 等工具指定哪些属性在更改时应过渡：
¥Use utilities like transition and transition-colors to specify which properties should transition when they change:
悬停在按钮上以查看预期行为
<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>支持减少运动(Supporting reduced motion)
¥Supporting reduced motion
对于用户指定他们更偏好缩减动作的情况，你可以使用 motion-safe 和 motion-reduce 变体有条件地应用动画和转场：
¥For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:
<button class="transform transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none ..."> <!-- ... --></button>使用自定义值(Using a custom value)
¥Using a custom value
使用 transition-[<value>] 语法 根据完全自定义的值设置 transition properties：
<button class="transition-[height] ..."> <!-- ... --></button>对于 CSS 变量，还可以使用 transition-(<custom-property>) 语法：
<button class="transition-(--my-properties) ..."> <!-- ... --></button>这只是简写，用于 transition-[var(<custom-property>)] 它会自动为你添加 var() 函数。
响应式设计(Responsive design)
¥Responsive design
在 transition-property 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<button class="transition-none md:transition-all ..."> <!-- ... --></button>请参阅 变体文档 详细了解如何使用变体。