css 动画总结关键帧动画 @keyframes CSS3 动画是通过 @keyframes 规则和 animation

关键帧动画 @keyframes

CSS3 动画是通过 @keyframes 规则和 animation 属性来实现的。它允许我们创建复杂的动画效果，而无需使用 JavaScript。以下是 CSS3 动画的总结：

1. @keyframes 规则

@keyframes 规则用于定义动画的关键帧。关键帧指定了动画在特定时间点的样式。

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

2. animation 属性

animation 属性用于将动画应用到元素上。它是一个简写属性，可以设置多个动画相关的子属性。

.element {
  animation: example 2s infinite;
}

3. animation 的子属性

animation-name：指定要应用的 @keyframes 动画名称。
animation-duration：动画持续时间。
animation-timing-function：动画的速度曲线（如 linear、ease、ease-in、ease-out、ease-in-out）。
animation-delay：动画开始前的延迟时间。
animation-iteration-count：动画的播放次数（如 infinite 表示无限次）。
animation-direction：动画的方向（如 normal、reverse、alternate、alternate-reverse）。
animation-fill-mode：动画在执行前后如何应用样式（如 none、forwards、backwards、both）。
animation-play-state：动画的播放状态（如 running、paused）。

4. 示例

以下是一个完整的示例，展示了如何使用 CSS3 动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 动画示例</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: move 2s infinite alternate;
        }

        @keyframes move {
            0% { transform: translateX(0); }
            100% { transform: translateX(200px); }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这个示例中，.box 元素将沿 X 轴在 0 到 200 像素之间来回移动，动画持续时间为 2 秒，并无限次重复。

5. 其他注意事项

性能：尽量使用 transform 和 opacity 属性来创建动画，因为它们可以利用 GPU 加速，性能更好。
浏览器兼容性：确保在旧版浏览器中使用适当的前缀（如 -webkit-、-moz- 等）。
调试：使用浏览器的开发者工具来调试和优化动画效果。

CSS 过渡动画（Transitions）

CSS 过渡动画（Transitions）允许你在属性值发生变化时，平滑地过渡到新的值。通过使用过渡动画，可以创建简单而流畅的动画效果，而无需使用 JavaScript。以下是 CSS 过渡动画的总结：

1. transition 属性

transition 是一个简写属性，用于设置元素的过渡效果。它可以设置多个过渡相关的子属性。

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

2. transition 的子属性

transition-property：指定要应用过渡效果的 CSS 属性（如 width、height、background-color 等）。
transition-duration：过渡效果的持续时间（如 2s、500ms）。
transition-timing-function：过渡效果的速度曲线（如 linear、ease、ease-in、ease-out、ease-in-out）。
transition-delay：过渡效果开始前的延迟时间（如 1s、200ms）。

3. 示例

以下是一个完整的示例，展示了如何使用 CSS 过渡动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 过渡动画示例</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: width 2s, height 2s, background-color 2s, transform 2s;
        }

        .box:hover {
            width: 200px;
            height: 200px;
            background-color: blue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这个示例中，当用户将鼠标悬停在 .box 元素上时，元素的宽度、高度、背景颜色和旋转角度将平滑地过渡到新的值，过渡效果持续时间为 2 秒。

4. transition-timing-function 的值

linear：匀速过渡。
ease：缓动过渡（默认值）。
ease-in：加速过渡。
ease-out：减速过渡。
ease-in-out：先加速后减速过渡。
cubic-bezier(n, n, n, n)：自定义贝塞尔曲线过渡。

5. 多个过渡效果

可以为多个属性设置过渡效果，使用逗号分隔每个过渡效果。

.element {
  transition: width 2s, height 2s, background-color 2s;
}

6. 其他注意事项

性能：尽量使用 transform 和 opacity 属性来创建过渡效果，因为它们可以利用 GPU 加速，性能更好。
浏览器兼容性：确保在旧版浏览器中使用适当的前缀（如 -webkit-、-moz- 等）。
调试：使用浏览器的开发者工具来调试和优化过渡效果。