当前位置：首页 > article >正文

CSS 过渡动画效果

article 2025/1/5 13:52:49

在 CSS 中，transition 是用来实现元素属性平滑过渡的一个属性。通过 transition，你可以指定当元素的状态发生变化时，如何在一定时间内平滑地过渡到新的样式，而不是立即跳变。

使用于侧边栏展开和收起了，左侧区域的自适应效果

`transition` 属性的基本语法：

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

property：指定要应用过渡效果的 CSS 属性，可以是一个具体的属性（如 background-color，width 等），或者使用 all 表示所有可以过渡的属性。
duration：过渡的持续时间，通常使用秒（s）或毫秒（ms）表示。比如 0.5s 表示 0.5 秒。
timing-function：过渡的时间函数，用来控制动画的速度变化。常见的有 linear、ease、ease-in、ease-out 等。
delay：指定过渡效果开始前的延迟时间。可以使用秒（s）或毫秒（ms）表示。

常见的 `transition` 示例：

基本过渡效果：当鼠标悬停在元素上时，背景颜色会平滑过渡：
```
div {
  background-color: blue;
  transition: background-color 0.5s ease;
}

div:hover {
  background-color: red;
}
```
解释：
- 元素的背景色会从蓝色平滑过渡到红色，过渡时间是 0.5 秒，使用默认的 ease 时间函数（即开始慢，结束快）。

多个属性过渡：同时过渡多个属性，例如宽度和颜色：

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.3s, height 0.3s, background-color 0.5s;
}

div:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

解释：

当鼠标悬停时，div 的宽度和高度在 0.3 秒内过渡到新的值，而背景颜色在 0.5 秒内过渡。

延迟过渡效果：设置延迟后才开始过渡：
```
div {
  width: 100px;
  transition: width 0.5s ease 1s; /* 延迟 1 秒后开始宽度过渡 */
}

div:hover {
  width: 200px;
}
```
解释：
- 当鼠标悬停时，宽度会在 1 秒的延迟后开始过渡，持续时间为 0.5 秒。
使用 all 关键字：同时过渡所有属性：
```
div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 0.5s ease;
}

div:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}
```
解释：
- transition: all 0.5s ease; 表示所有可过渡的属性都会在 0.5 秒内平滑过渡，采用 ease 的时间函数。