CSS 过渡

CSS 过渡 (Transitions) 可以在元素的属性值发生变化时，提供一种平滑的动画效果，而不是让变化瞬间完成。这极大地提升了用户体验，使界面交互感觉更自然、更流畅。

例如，当鼠标悬停在一个按钮上时，你可以让它的背景颜色在 0.3 秒内平滑地从蓝色渐变为深蓝色，而不是立即跳变。

`transition-property`

transition-property 属性用于指定你想要应用过渡效果的 CSS 属性的名称。

none: 没有属性会获得过渡效果。
all: (默认) 所有可动画的属性都会获得过渡效果。
<property-name>: 指定一个或多个属性，如 background-color, transform。

css

button {
  transition-property: background-color, transform;
}

`transition-duration`

transition-duration 属性用于指定过渡效果完成所需的时间。单位是秒 (s) 或毫秒 (ms)。

css

button {
  transition-duration: 0.3s; /* 300ms */
}

`transition-timing-function`

transition-timing-function 属性用于描述过渡效果的速度曲线。它定义了过渡在不同时间点的快慢变化。

ease: (默认) 慢速开始，然后变快，然后慢速结束。
linear: 从头到尾保持匀速。
ease-in: 慢速开始，然后加速。
ease-out: 快速开始，然后减速。
ease-in-out: 与 ease 类似，但加减速的幅度更大。
cubic-bezier(n,n,n,n): 允许你创建自定义的速度曲线。

css

button {
  transition-timing-function: ease-in-out;
}

`transition-delay`

transition-delay 属性用于指定在属性值变化后，等待多久才开始执行过渡效果。

css

button {
  transition-delay: 1s;
}

`transition` (简写属性)

使用 transition 简写属性是最佳实践。你可以在一行内设置所有过渡相关的属性。顺序通常是：

transition: [property] [duration] [timing-function] [delay];

css

button {
  background-color: #3498db;
  color: white;
  padding: 15px 25px;
  border: none;
  cursor: pointer;
  /* 简写属性 */
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #2980b9;
}

为多个属性设置过渡

你可以用逗号分隔，为不同的属性定义不同的过渡效果。

css

a {
  color: blue;
  background-color: yellow;
  transition: color 0.3s ease, background-color 0.5s linear;
}

a:hover {
  color: red;
  background-color: lightgreen;
}

什么属性可以过渡？

不是所有的 CSS 属性都可以应用过渡效果。通常，那些具有中间值的属性（如颜色、长度、百分比、数字）是可以过渡的。例如，你可以从 color: red 过渡到 color: blue，因为存在很多中间的颜色值。但你无法从 display: none 过渡到 display: block，因为它们之间没有中间状态。

常见的可过渡属性: color, background-color, opacity, transform, width, height, font-size, margin, padding, border-radius, box-shadow 等。

过渡是现代网页设计中不可或缺的一部分，它用最简单的方式为网站带来了生动和优雅的交互。

CSS 过渡 ​

transition-property ​

transition-duration ​

transition-timing-function ​

transition-delay ​

transition (简写属性) ​

为多个属性设置过渡 ​

什么属性可以过渡？ ​