动画与过渡

CSS 动画和过渡是用于在网页中创建动态效果的工具。它们可以让元素在不同状态之间平滑地变化，提升用户体验。

CSS 过渡（Transitions）

语法

/* 选择器 */
.box {
    transition: property duration timing-function delay;
}

属性声明

• property：要变化的 CSS 属性，如 width、height、background-color 等，或使用 all 代表所有属性。
• duration：动画持续时间，1ms 或者 1s。
• timing-function：动画速度曲线，可选值有 linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier()。
• delay：延迟时间，在动画开始之前等待的时间。

示例

.button {
    background-color: blue;
    transition: background-color 0.5s ease;
}

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

常用时间函数

• ease：默认值，开始慢，结束快。
• linear：匀速。
• ease-in：开始快，结束慢。
• ease-out：开始慢，结束快。
• ease-in-out：开始慢，结束慢，中间快。
• cubic-bezier()：自定义曲线，接受四个参数，分别是两个点的坐标（x1, y1, x2, y2），值域为 0-1 之间的数值。

CSS 动画（Animations）

动画用于创建更复杂的动态效果，可以定义多个关键帧（Keyframes）来控制元素的样式变化。

关键帧（Keyframes）

使用 @keyframes 定义动画的关键帧。

语法

@keyframes 动画名称 {
    0% {
        /* 初始状态 */
    }
    50% {
        /* 中间状态 */
    }
    100% {
        /* 结束状态 */
    }
}

/* 示例 */
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

应用动画

使用 animation 属性将动画应用到元素上。

语法

.box {
    animation: name duration timing-function delay iteration-count direction fill-mode;
}

属性声明

• name：动画名称，对应 @keyframes 中定义的动画名称。
• duration：动画持续时间，1ms 或者 1s。
• timing-function：动画速度曲线，可选值同上。
• delay：延迟时间，在动画开始之前等待的时间。
• iteration-count：动画重复次数，默认值是 1，可以设置为无限循环。
• direction：动画播放方向，可选值是 normal、reverse、alternate。
• fill-mode：动画结束后元素的状态，可选值是 none、forwards、backwards、both。

示例

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: slide 2s ease-in-out 1;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(100px);
    }
}

动画与过渡

区别

特性	过渡（Transitions）	动画（Animations）
触发方式	需要状态变化（如悬停、聚焦）	自动触发或通过 JavaScript 控制
控制粒度	只能定义开始和结束状态	可以定义多个关键帧
适用场景	简单的状态变化	复杂的动态效果
性能	性能较好	性能稍差，尤其是复杂动画

常见用例

过渡用例

• 按钮悬停效果。
• 下拉菜单的展开与收起。
• 图片放大效果。

动画用例

• 加载动画（如旋转图标）。
• 页面元素的入场和退场效果。
• 无限循环的背景滚动。

性能优化建议

1. 使用 transform 和 opacity：这些属性不会触发重排（Reflow），性能较好。
2. 避免过多动画：过多的动画可能导致页面卡顿。
3. 使用 will-change：提示浏览器元素将要发生变化，优化渲染性能。