首页 › CSS › 动画 › 过渡 Transition

过渡让 CSS 属性值变化时平滑变化，而非突兀跳变。

基础用法

.button {
  background: #1890ff;
  transition: background 0.3s ease;
}
.button:hover {
  background: #40a9ff;
}

属性详解

.element {
  transition-property: all;            /* 默认：所有可过渡属性 */
  transition-duration: 0.3s;          /* 过渡时长 */
  transition-timing-function: ease;     /* 速度曲线 */
  transition-delay: 0s;                /* 延迟 */

  /* 简写 */
  transition: all 0.3s ease 0s;
  transition: transform 0.3s, opacity 0.2s;
  transition: margin-left 0.3s ease-in-out;
}

可过渡属性

属性类型	示例
颜色	color background border-color
位置	left top transform
尺寸	width height margin padding font-size
视觉	opacity box-shadow filter
变换	transform

不可过渡的属性

display、font-family、position 等离散值。

Timing 函数

.ease         { transition-timing-function: ease; }          /* 慢→快→慢（默认）*/
.linear       { transition-timing-function: linear; }        /* 匀速 */
.ease-in      { transition-timing-function: ease-in; }       /* 慢→快 */
.ease-out     { transition-timing-function: ease-out; }      /* 快→慢 */
.ease-in-out  { transition-timing-function: ease-in-out; }   /* 慢→快→慢 */

/* 贝塞尔曲线 */
.custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

/* 阶跃函数 */
.steps { transition-timing-function: steps(4, end); }

触发方式

/* 伪类触发 */
.button:hover { }
.button:focus { }
.button:active { }

/* 类切换（JS） */
.element.active { transform: translateX(100px); }

/* 媒体查询 */
@media (prefers-reduced-motion: no-preference) {
  .element { transition: transform 0.3s; }
}

小结

属性	作用
transition-property	指定过渡属性
transition-duration	过渡时长
transition-timing-function	速度曲线
transition-delay	延迟
transition	简写

上一节：滤镜、混合模式与裁剪 下一节：关键帧 Animation

贡献者: 布欧-Lewyon