在Sass中如何定义统一的CSS过渡动画时长？-css教程-PHP中文网

不能用同一个变量管所有过渡和动画，因为transition和animation触发机制、浏览器优化路径及用户预期完全不同；应分别定义fast/normal/slow过渡时长变量，并配合具体property、缓动函数及will-change使用，再通过可配置参数的@mixin封装逻辑。

在sass中如何定义统一的css过渡动画时长？

为什么不能用同一个变量管所有过渡和动画

很多人一上来就定义 $duration: 0.3s，然后到处塞进 transition 和 animation 里——结果按钮悬停快得像弹窗，而模态框入场慢得让人误以为卡了。根本原因是：transition 和 animation 触发机制、浏览器优化路径、用户预期完全不同。混用一个变量，等于把油门和刹车绑在同一个踏板上。

怎么定义真正可用的过渡时长变量

过渡（transition）只响应属性变化，适合微交互；它需要更短、更精准的节奏。推荐在全局变量文件（如 _variables.scss）里单独定义：

$transition-duration-fast: 0.18s; —— 用于按钮 hover、开关 toggle
$transition-duration-normal: 0.25s; —— 默认表单焦点、边框高亮
$transition-duration-slow: 0.35s; —— 仅用于视觉权重高的状态切换，比如折叠面板展开

注意：别省略分号，别写成 $transition-duration: 0.25s !default —— !default 在多层 import 时容易被意外覆盖，直接赋值更可控。

过渡时长必须配合 transition-property 使用

只写 transition: all $transition-duration-normal ease-out 是危险的。比如对 transform 和 color 同时过渡，但硬件加速只作用于 transform，color 还是走重绘，反而拖慢整体帧率。

实操建议：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

优先指定具体属性：transition: background-color $transition-duration-fast ease-in, transform $transition-duration-fast ease-out;
避免 all，尤其在滚动区域或高频交互组件中
加 will-change: transform; 前置提示浏览器优化，但别滥用——只在真正需要时加

用 @mixin 封装过渡逻辑才真正可维护

变量只是数字，@mixin 才能把“动什么、怎么动、何时动”收口成一条规则。例如：

@mixin transition-bg-transform($dur: $transition-duration-fast) {
  transition:
    background-color $dur ease-in,
    transform $dur ease-out;
  will-change: transform;
}

调用时：.btn { @include transition-bg-transform($transition-duration-normal); }

关键点：