CSS过渡

CSS过渡允许元素在状态变化时平滑地过渡样式，而不是立即改变。过渡是CSS动画的一种简化形式，非常适合实现悬停效果、点击效果等简单的交互。

过渡基础

过渡通过transition属性实现，它可以指定哪些CSS属性应该过渡、过渡的持续时间、过渡的速度曲线和延迟时间。

css

.element {
  transition: width 2s ease 1s;
}

.element:hover {
  width: 300px;
}

过渡属性

transition-property

指定哪些CSS属性应该进行过渡。可以指定单个属性、多个属性或使用all关键字表示所有可过渡的属性。

css

/* 单个属性 */
.element {
  transition-property: width;
}

/* 多个属性 */
.element {
  transition-property: width, height, background-color;
}

/* 所有可过渡属性 */
.element {
  transition-property: all;
}

transition-duration

指定过渡完成所需的时间，单位为秒(s)或毫秒(ms)。

css

.element {
  transition-duration: 2s;
}

transition-timing-function

指定过渡的速度曲线，控制过渡效果的变化速度。

css

.element {
  transition-timing-function: ease;
}

常用的值：

ease：默认值，慢入→快→慢出
linear：匀速
ease-in：慢入
ease-out：慢出
ease-in-out：慢入慢出
cubic-bezier(n,n,n,n)：自定义贝塞尔曲线

transition-delay

指定过渡开始前的延迟时间，单位为秒(s)或毫秒(ms)。

css

.element {
  transition-delay: 1s;
}

transition

transition是一个简写属性，可以同时设置以上所有过渡属性。

css

.element {
  transition: property duration timing-function delay;
}

例如：

css

.element {
  transition: width 2s ease 1s;
}

可过渡的属性

并非所有CSS属性都可以过渡。以下是一些常用的可过渡属性：

颜色相关：color、background-color、border-color
尺寸相关：width、height、padding、margin
位置相关：top、right、bottom、left
变换相关：transform
透明度：opacity
边框：border-width、border-radius
字体：font-size、line-height

过渡示例

悬停效果

css

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

多重过渡

css

.card {
  width: 200px;
  height: 200px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  width: 220px;
  height: 220px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

平滑滚动

css

html {
  scroll-behavior: smooth;
}

过渡事件

JavaScript提供了两个过渡相关的事件：

transitionstart：过渡开始时触发
transitionend：过渡结束时触发

javascript

const element = document.querySelector('.element');
element.addEventListener('transitionend', () => {
  console.log('过渡结束');
});

性能考虑

优先过渡transform和opacity属性，因为它们可以通过GPU加速
避免过渡布局属性（如width、height、margin等），因为它们会触发重排
使用will-change属性提示浏览器哪些属性将被过渡

css

.animated-element {
  will-change: transform, opacity;
}

浏览器兼容性

CSS过渡在所有现代浏览器中都有很好的支持：

Chrome 4+
Firefox 4+
Safari 3.1+
IE 10+
Edge 12+

对于旧版本浏览器的支持，可以添加浏览器前缀：

css

.element {
  transition: width 2s;
  -webkit-transition: width 2s; /* Safari */
  -moz-transition: width 2s; /* Firefox */
  -o-transition: width 2s; /* Opera */
}