编辑“︁CSS动画概念”︁

= CSS动画概念 =

CSS动画（CSS Animations）是一种通过层叠样式表（CSS）实现元素动态效果的技术，允许开发者在不使用JavaScript的情况下创建平滑的视觉过渡和关键帧动画。它是现代网页设计中增强用户体验的核心工具之一。

== 核心概念 ==

=== 1. 动画的基本组成 ===
CSS动画由两个关键部分组成：
* '''@keyframes规则'''：定义动画的中间步骤（关键帧）
* '''animation属性'''：将关键帧动画应用到元素并控制其行为

=== 2. 与过渡(transition)的区别 ===
{| class="wikitable"
|-
! 特性 !! CSS动画 !! CSS过渡
|-
| 控制程度 || 完全控制关键帧 || 只能定义起始和结束状态
|-
| 自动触发 || 可以自动运行 || 需要状态变化触发
|-
| 循环能力 || 支持无限循环 || 只能运行一次
|-
| 中间状态 || 可定义多个关键帧 || 只有起始和结束状态
|}

== @keyframes规则 ==
定义动画序列的关键帧语法：
<syntaxhighlight lang="css">
@keyframes animation-name {
  0% {
    /* 起始状态 */
    property: value;
  }
  50% {
    /* 中间状态 */
    property: value;
  }
  100% {
    /* 结束状态 */
    property: value;
  }
}
</syntaxhighlight>

示例：创建一个简单的淡入动画
<syntaxhighlight lang="css">
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</syntaxhighlight>

== animation属性 ==
animation是以下子属性的简写：
* animation-name
* animation-duration
* animation-timing-function
* animation-delay
* animation-iteration-count
* animation-direction
* animation-fill-mode
* animation-play-state

完整语法：
<syntaxhighlight lang="css">
.element {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
</syntaxhighlight>

== 实际案例 ==

=== 案例1：弹跳球效果 ===
<mermaid>
graph TD
    A[开始] --> B[顶部位置]
    B --> C[落地挤压]
    C --> D[反弹恢复]
    D --> B
</mermaid>

实现代码：
<syntaxhighlight lang="css">
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
  75% {
    transform: translateY(0) scale(1.1, 0.9);
  }
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: red;
  animation: bounce 2s ease-in-out infinite;
}
</syntaxhighlight>

=== 案例2：进度条动画 ===
<syntaxhighlight lang="css">
@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.progress-bar {
  height: 20px;
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  animation: progress 3s ease-out forwards;
}
</syntaxhighlight>

== 性能优化 ==
* 优先使用<code>transform</code>和<code>opacity</code>属性，它们可以通过GPU加速
* 避免动画过多使用<code>height</code>、<code>width</code>或<code>margin</code>等会触发重排的属性
* 使用<code>will-change</code>属性预先告知浏览器哪些元素会变化

== 数学原理 ==
CSS动画的时间函数基于贝塞尔曲线，其数学表示为：
<math>B(t) = P_0(1-t)^3 + 3P_1t(1-t)^2 + 3P_2t^2(1-t) + P_3t^3</math>
其中<math>P_0</math>到<math>P_3</math>是控制点，t∈[0,1]

== 浏览器支持 ==
所有现代浏览器都支持CSS动画，包括：
* Chrome 4+
* Firefox 5+
* Safari 4+
* Opera 12+
* Edge 12+
* IE 10+

== 进阶技巧 ==
* 使用CSS变量动态控制动画参数
* 结合<code>prefers-reduced-motion</code>媒体查询为运动敏感用户提供替代方案
* 通过JavaScript控制<code>animation-play-state</code>实现交互式动画

== 总结 ==
CSS动画为网页元素提供了强大的动态表现能力，通过关键帧和动画属性的组合，开发者可以创建从简单到复杂的各种动画效果。理解其核心概念和最佳实践对于创建高性能、吸引人的网页界面至关重要。

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