编辑“︁CSS动画实例”︁（章节）

= CSS动画实例 =

CSS动画（CSS Animations）是一种通过CSS属性随时间变化来创建动态效果的技术。它允许开发者在不使用JavaScript的情况下，实现平滑的过渡和复杂的动画效果。CSS动画主要由'''@keyframes'''规则和'''animation'''属性组成，适用于从简单的悬停效果到复杂的交互式动画。

== 基本概念 ==

CSS动画的核心是'''@keyframes'''规则，它定义了动画的各个阶段（关键帧）及其样式。然后通过'''animation'''属性将动画应用到元素上。以下是CSS动画的基本组成部分：

* '''@keyframes'''：定义动画的中间步骤。
* '''animation-name'''：指定要使用的@keyframes名称。
* '''animation-duration'''：设置动画的持续时间。
* '''animation-timing-function'''：控制动画的速度曲线（如ease、linear等）。
* '''animation-delay'''：设置动画开始前的延迟时间。
* '''animation-iteration-count'''：定义动画的播放次数（如infinite表示无限循环）。
* '''animation-direction'''：控制动画是否反向播放（如alternate）。
* '''animation-fill-mode'''：定义动画执行前后的样式状态。

== 基本示例 ==

以下是一个简单的CSS动画示例，展示一个元素从左向右移动的效果：

<syntaxhighlight lang="css">
/* 定义关键帧 */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);
    }
}

/* 应用动画 */
.box {
    width: 50px;
    height: 50px;
    background-color: blue;
    animation-name: slide;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
</syntaxhighlight>

'''输出效果'''：一个蓝色方块会在2秒内从初始位置向右移动100像素，然后返回，无限循环。

== 进阶示例：多关键帧动画 ==

CSS动画支持多个关键帧，可以创建更复杂的效果。例如，以下代码实现一个元素颜色和位置同时变化的动画：

<syntaxhighlight lang="css">
@keyframes colorAndMove {
    0% {
        transform: translateX(0);
        background-color: red;
    }
    50% {
        transform: translateX(100px);
        background-color: yellow;
    }
    100% {
        transform: translateX(200px);
        background-color: green;
    }
}

.advanced-box {
    width: 50px;
    height: 50px;
    animation: colorAndMove 3s infinite alternate;
}
</syntaxhighlight>

'''输出效果'''：一个方块从红色变为黄色再变为绿色，同时向右移动200像素，然后反向播放。

== 实际应用案例 ==

CSS动画广泛应用于网页设计，例如：

1. '''加载动画'''：旋转的加载图标。
2. '''悬停效果'''：按钮悬停时放大或变色。
3. '''页面过渡'''：元素进入或离开时的淡入淡出效果。

以下是一个按钮悬停动画的示例：

<syntaxhighlight lang="css">
.button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    transition: transform 0.3s, background-color 0.3s;
}

.button:hover {
    transform: scale(1.1);
    background-color: #45a049;
}
</syntaxhighlight>

'''输出效果'''：鼠标悬停时，按钮会放大并改变颜色。

== 动画性能优化 ==

CSS动画通常比JavaScript动画更高效，但仍需注意以下优化技巧：

* 使用'''transform'''和'''opacity'''属性，因为它们不会触发重排（reflow）。
* 避免过多使用'''box-shadow'''或'''filter'''等高开销属性。
* 使用'''will-change'''属性提示浏览器哪些属性将变化。

<syntaxhighlight lang="css">
.optimized-box {
    will-change: transform;
    animation: slide 2s ease infinite;
}
</syntaxhighlight>

== 动画时间函数（Timing Functions） ==

CSS提供了多种时间函数来控制动画的速度曲线：

* '''linear'''：匀速动画。
* '''ease'''：默认值，先加速后减速。
* '''ease-in'''：缓慢开始。
* '''ease-out'''：缓慢结束。
* '''cubic-bezier()'''：自定义贝塞尔曲线。

示例：

<syntaxhighlight lang="css">
.timing-box {
    animation: slide 2s cubic-bezier(0.1, 0.7, 1.0, 0.1) infinite;
}
</syntaxhighlight>

== Mermaid 动画流程示例 ==

以下是一个动画流程的Mermaid图表示例：

<mermaid>
graph TD
    A[开始] --> B[定义@keyframes]
    B --> C[应用animation属性]
    C --> D[浏览器渲染动画]
    D --> E[动画结束或循环]
</mermaid>

== 数学公式示例 ==

如果需要计算动画的贝塞尔曲线，可以使用数学公式：

<math>
B(t) = (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t) t^2 P_2 + t^3 P_3
</math>

其中<math>P_0</math>到<math>P_3</math>是控制点。

== 总结 ==

CSS动画是网页设计中强大的工具，适用于从简单到复杂的动态效果。通过'''@keyframes'''和'''animation'''属性，开发者可以创建流畅且高性能的动画。优化动画性能并合理使用时间函数，可以进一步提升用户体验。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS动画]]