Transitions & Easing
过渡变量用于为您的应用提供一致的动画持续时间。它们控制动画完成所需的时间。
示例
.element {
transition: var(--dwc-transition-slow) background-color;
}
变量
| 变量 | 默认值 | 示例 |
|---|---|---|
--dwc-transition-x-slow | 1000ms | |
--dwc-transition-slow | 500ms | |
--dwc-transition-medium | 250ms | |
--dwc-transition-fast | 150ms | |
--dwc-transition-x-fast | 50ms | |
--dwc-transition | var(--dwc-transition-medium) |
缓动
缓动变量定义值随时间变化的方式，使过渡看起来更加自然。
示例
.element {
transition: transform var(--dwc-transition) var(--dwc-ease-inOutBack);
}
尝试将鼠标悬停在每个缓动预览上，以查看其动画效果。