CSS transition（过渡效果）详解

CSS 过渡效果（CSS transitions）是一种在元素属性发生变化时，通过动画过渡来平滑地改变元素外观的技术。它允许您在属性从一个状态过渡到另一个状态时定义动画效果，比如改变元素的位置、大小、颜色等。

以下是 CSS 过渡效果的详细解释和使用方法：

1. 过渡属性（transition property）：

   • transition-property：指定要过渡的属性，可以是单个属性或多个属性的列表，如 width、height、color 等。
   • transition-duration：指定过渡的持续时间，以秒（s）或毫秒（ms）为单位。
   • transition-timing-function：指定过渡的时间曲线，控制动画的速度变化，常见的值有 ease、linear、ease-in、ease-out 等。
   • transition-delay：指定过渡的延迟时间，以秒（s）或毫秒（ms）为单位。

2. 过渡效果的应用：

   • 单个属性过渡：通过设置过渡属性，当该属性的值发生变化时，会自动应用过渡效果。

   .box {
     transition-property: width;
     transition-duration: 1s;
     transition-timing-function: ease;
   }
   

   • 多个属性过渡：通过设置多个过渡属性，可以同时控制多个属性的过渡效果。

   .box {
     transition-property: width, height, color;
     transition-duration: 1s;
     transition-timing-function: ease;
   }
   

   • 鼠标悬停过渡：通过使用 :hover 伪类选择器，可以在鼠标悬停时触发过渡效果。

   .box {
     transition-property: width;
     transition-duration: 1s;
     transition-timing-function: ease;
   }
   .box:hover {
     width: 200px;
   }
   

3. 过渡效果的高级用法：

   • 可以使用 transition 简写属性同时设置多个过渡属性的值。

   .box {
     transition: width 1s ease, height 0.5s linear;
   }
   

   • 可以使用 transition 属性在过渡开始和结束时执行特定的动作，如添加或移除类名。

   .box {
     transition: width 1s ease;
   }
   .box.active {
     width: 200px;
   }
   

CSS 过渡效果提供了一种简单而强大的方式来实现元素属性的动画过渡。通过设置过渡属性和相关的属性值，您可以创建出各种平滑的过渡效果，使页面更加生动和吸引人。