CSS 过渡动画效果

在 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 示例：

1. 基本过渡效果： 当鼠标悬停在元素上时，背景颜色会平滑过渡：

   div {background-color: blue;transition: background-color 0.5s ease;
   }div:hover {background-color: red;
   }

    

   解释：

   • 元素的背景色会从蓝色平滑过渡到红色，过渡时间是 0.5 秒，使用默认的 ease 时间函数（即开始慢，结束快）。

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

   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 秒内过渡。

3. 延迟过渡效果： 设置延迟后才开始过渡：

   div {width: 100px;transition: width 0.5s ease 1s; /* 延迟 1 秒后开始宽度过渡 */
   }div:hover {width: 200px;
   }

    

   解释：

   • 当鼠标悬停时，宽度会在 1 秒的延迟后开始过渡，持续时间为 0.5 秒。

4. 使用 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 的时间函数。

常见的 timing-function（时间函数）：

• ease：默认的缓动效果，开始慢，接着加速，最后减速。
• linear：匀速过渡，整个过渡过程的速度是均匀的。
• ease-in：过渡开始时较慢，然后加速。
• ease-out：过渡开始时较快，最后减速。
• ease-in-out：过渡开始和结束时较慢，中间部分较快。
• cubic-bezier(x1, y1, x2, y2)：自定义的时间函数，可以通过贝塞尔曲线来控制过渡效果的速度。

总结：

transition 是 CSS 中非常实用的一个属性，它允许你在状态改变时（例如，鼠标悬停）平滑地过渡到新的样式。通过控制过渡的时间、时间函数、延迟等，你可以实现丰富的动态效果，提升用户体验。