CSS3 动画基础与技巧

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

1. 基础动画语法

/* 定义关键帧动画 */
@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. 常用动画示例

淡入淡出

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

移动元素

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

旋转

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

缩放效果

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

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

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

5. 进阶技巧

使用steps()实现逐帧动画

@keyframes typing {from { width: 0 }to { width: 100% }
}.text {animation: typing 4s steps(40) infinite;
}

暂停/播放动画

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

6. 性能优化

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

7. 浏览器兼容前缀

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

完整示例：弹跳球效果

<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>