制作css动画
CSS动画基础
CSS动画通过@keyframes和animation属性实现。@keyframes定义动画关键帧，animation控制动画的播放方式（如时长、次数、缓动效果）。
示例：淡入效果
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}常用动画属性
animation-name: 指定@keyframes名称（如fadeIn）。animation-duration: 动画时长（如3s）。animation-timing-function: 缓动函数（如ease、linear）。animation-delay: 延迟启动时间（如1s）。animation-iteration-count: 播放次数（infinite表示循环）。animation-direction: 播放方向（alternate表示来回播放）。
组合简写
.element {
animation: fadeIn 2s ease-in-out 1s infinite alternate;
}复杂关键帧
定义多段关键帧，百分比表示进度：
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}性能优化建议
- 优先使用
transform和opacity，避免触发重排（如修改width）。 - 启用硬件加速：对移动元素添加
transform: translateZ(0)。 - 减少动画数量，避免同时运行过多动画。
交互控制
通过JavaScript动态添加/移除类名控制动画：
const element = document.querySelector('.element');
element.classList.add('animate'); // 触发动画
element.addEventListener('animationend', () => {
console.log('动画结束');
});工具推荐
- CSS库: Animate.css（预设动画效果库）。
- 调试工具: Chrome DevTools 的
Animations面板。 - 生成器: CSS-Tricks、CodePen 的动画模板。
