CSS3 动画基础与技巧

CSS3动画允许你创建平滑、高性能的动画效果，无需JavaScript。主要通过@keyframes和animation属性实现。以下是详细指南：

1. 基础动画语法

css 复制代码

/* 定义关键帧动画 */
@keyframes example {
  0%   { background: red; }
  50%  { background: yellow; }
  100% { background: green; }
}

/* 应用动画 */
.element {
  animation: example 3s ease-in-out infinite;
}

2. 关键属性

属性	描述	示例值
animation-name	动画名称	example
animation-duration	动画时长	2s / 400ms
animation-timing-function	速度曲线	ease, linear, cubic-bezier(0.1, 0.7, 1.0, 0.1)
animation-delay	开始延迟	1s
animation-iteration-count	重复次数	3, infinite
animation-direction	播放方向	normal, reverse, alternate
animation-fill-mode	结束状态保留	forwards, backwards

3. 常用动画示例

淡入淡出

css 复制代码

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.element {
  animation: fade 1.5s ease-in;
}

移动元素

css 复制代码

@keyframes move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

旋转

css 复制代码

@keyframes spin {
  to { transform: rotate(360deg); }
}
.element {
  animation: spin 2s linear infinite;
}

缩放效果

css 复制代码

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

4. 复合动画（多个动画同时运行）

css 复制代码

.element {
  animation: 
    pulse 1.5s infinite,
    move 3s alternate;
}

5. 进阶技巧

使用steps()实现逐帧动画

css 复制代码

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

.text {
  animation: typing 4s steps(40) infinite;
}

暂停/播放动画

css 复制代码

.element {
  animation-play-state: paused; /* 通过JS控制 */
}

.element:hover {
  animation-play-state: running;
}

6. 性能优化

优先使用 transform 和 opacity（不会触发重排）
避免动画阻塞主线程：使用 will-change: transform;
硬件加速：对移动元素添加 transform: translateZ(0);

7. 浏览器兼容前缀

css 复制代码

@-webkit-keyframes example { ... }
.element {
  -webkit-animation: example 2s;
          animation: example 2s;
}

完整示例：弹跳球效果

html 复制代码

<div class="ball"></div>

<style>
.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(red, orange);
  animation: bounce 1s cubic-bezier(0.5, 0.05, 0.5, 1) infinite alternate;
}

@keyframes bounce {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100px); }
}
</style>