CSS Transition属性

CSS的transition属性用于指定CSS属性从一个状态到另一个状态的过渡效果。它允许我们指定一个CSS属性的变化在一段时间内平滑发生。

用法

transition属性可以在CSS样式规则中直接定义，或通过CSS类实现样式变化。

示例代码：

/* 在hover时过渡宽度 */
.box {
  width: 100px;
  height: 100px;
  background-color: #ddd;
  transition: width 2s;
}
.box:hover {
  width: 200px;
}

语法

transition属性由以下可选属性值组成：

• transition-property：指定哪些CSS属性需要变化。如果没有指定，则所有属性都会过渡。
• transition-duration：指定过渡效果的持续时间，通常以秒为单位。
• transition-timing-function：指定过渡中的速度变化。默认为 ease。
• transition-delay：指定过渡效果延迟多长时间后再开始。默认为 0。

示例代码：

/* 过渡时间为2秒，延迟1秒, 变化曲线为ease-in-out */
.box {
  width: 100px;
  height: 100px;
  background-color: #ddd;
  transition: width 2s ease-in-out 1s;
}
.box:hover {
  width: 200px;
}

属性值

transition-property

transition-property 指定 CSS 属性名称需要变化的属性列表。指定的属性必须和在 transition-duration 中指定的时间一起出现。

• all: 所有属性都适用过渡效果。
• <property>：属性名称，单个或逗号分隔列表（例如 width、color）。

示例代码：

.box {
  width: 100px;
  height: 100px;
  background-color: #ddd;
  transition-property: width, height;
  transition-duration: 2s;
}
.box:hover {
  width: 200px;
  height: 200px;
}

transition-duration

transition-duration 指定 CSS 属性需要变化的过渡时间。它可以指定为一个或多个时间值，这些时间值与 transition-property 中的属性值对应。

示例代码：

.box {
  width: 100px;
  height: 100px;
  background-color: #ddd;
  transition-property: width, height;
  transition-duration: 2s, 1s;
}
.box:hover {
  width: 200px;
  height: 200px;
}

transition-timing-function

transition-timing-function 指定 CSS 属性的变化速度。这是一个在两个关键帧之间进行插值操作的函数，决定了变化速率的曲线形状。

• ease: 默认曲线，呈现出一个渐进放缓的过渡效果。
• linear: 线性曲线，变化速率恒定。
• ease-in: 加速的起始，变化速率从慢到快。
• ease-out: 减速的结束，变化速率从快到慢。
• ease-in-out: 加速的起始和减速的结束，先变慢后变快再变慢。

示例代码：

.box {
  width: 100px;
  height: 100px;
  background-color: #ddd;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
}
.box:hover {
  width: 200px;
}

transition-delay

transition-delay 指定 CSS 属性变化的开始时间。默认为0。

示例代码：

.box {
  width: 100px;
  height: 100px;
  background-color: #ddd;
  transition: width 2s 1s;
}
.box:hover {
  width: 200px;
}

兼容性

transition属性兼容性良好，支持大部分现代浏览器（包括PC和手机端）及IE 10以上版本。

总结

CSS transition属性可以让我们在不使用JavaScript的情况下实现CSS样式变化过渡效果。它提供了用于控制过渡动画的属性，例如持续时间、变化曲线等。通过使用这些属性，我们可以轻松地实现样式在过渡中的平滑过渡，并增强用户体验，使网站变得更加美观和吸引人。