一、什么是CSS过渡动画

CSS过渡动画是一种通过改变CSS属性，在一段时间内让元素逐渐过渡到新的状态的方式。它可以使我们的网页变得更加生动有趣，也可以提高用户体验。常见的CSS过渡动画包括：淡入淡出、缩放、旋转、位移、变形等，这些效果都可以通过改变CSS属性的值来实现。

二、CSS过渡的基本属性

transition-property：指定需要过渡的CSS属性名称。
transition-duration：指定过渡的持续时间，单位为秒或毫秒。
transition-timing-function：指定过渡效果的时间曲线，常用的有 ease、linear、ease-in、ease-out、ease-in-out 等。
transition-delay：指定过渡效果延迟的时间，单位为秒或毫秒。

三、CSS过渡动画的实现方式

1. 通过 `:hover` 伪类触发过渡

通过 :hover 伪类，实现鼠标悬停时元素属性的改变，从而触发CSS过渡动画。

.box {
    width: 100px;
    height: 100px;
    background-color: green;
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: ease;
    transition-delay: 1s;
}
.box:hover {
    width: 200px;
}

2. 通过JavaScript触发过渡

通过JavaScript修改元素CSS属性的值，从而触发CSS过渡动画。

var box = document.querySelector('.box');
box.style.width = '200px'; // 触发CSS过渡动画

3. 通过动态添加CSS类触发过渡

动态添加CSS类可以改变元素的样式，从而触发CSS过渡动画。

.box {
    width: 100px;
    height: 100px;
    background-color: green;
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: ease;
    transition-delay: 1s;
}
.box.big {
    width: 200px;
}

document.querySelector('.box').classList.add('big'); // 添加CSS类，触发CSS过渡动画

四、CSS过渡动画的优化

1. 尽可能使用 `transform` 和 `opacity` 实现过渡

transform 和 opacity 是GPU加速的属性，使用它们进行过渡能够获得更好的性能。

2. 避免使用复合属性实现过渡

复合属性如 background、border 等会同时影响多个属性，如果使用它们进行过渡，可能会影响性能。

3. 移除不必要的过渡属性

过渡属性越多，对性能的影响越大。只设置必要的过渡属性，能够提高性能。

4. 启用GPU加速

可以通过设置元素的 will-change 属性或使用 translate3d 启用GPU加速。

.box {
    will-change: transform;
}

五、CSS过渡动画的应用场景

1. 焦点图的轮播切换

通过实现淡入淡出、平移等效果，实现焦点图的轮播切换。

2. 按钮的交互效果

在鼠标悬浮、按下、点击等状态下，改变按钮颜色、大小、阴影等属性，提高交互体验。

3. 页面的滚动效果

通过实现位移、旋转等效果，实现页面滚动时动态变化的元素效果。

4. 动画特效的实现

通过实现关键帧动画，通过过渡实现动画特效，如 loading 动画、进度条动画等。

CSS过渡动画全面解析