利用css3制作动画
CSS3 动画基础
CSS3 动画通过 @keyframes 规则和 animation 属性实现，无需 JavaScript 即可创建平滑的动态效果。关键帧定义动画的各个阶段，animation 属性控制动画的播放方式。
定义关键帧
使用 @keyframes 规则定义动画序列。语法如下：
@keyframes 动画名称 {
0% { /* 初始状态 */ }
50% { /* 中间状态 */ }
100% { /* 结束状态 */ }
}示例：创建一个元素从左向右移动的动画：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}应用动画
通过 animation 属性将动画绑定到元素。常用子属性包括：
animation-name: 指定@keyframes名称。animation-duration: 动画持续时间（如2s）。animation-timing-function: 速度曲线（如ease-in-out）。animation-delay: 动画延迟时间。animation-iteration-count: 播放次数（infinite表示循环）。animation-direction: 播放方向（如alternate往返播放）。
示例：让一个方块滑动并循环：
.box {
width: 50px;
height: 50px;
background: blue;
animation: slide 2s ease-in-out infinite alternate;
}复合动画
通过逗号分隔可同时应用多个动画。例如旋转和移动：
@keyframes rotate {
to { transform: rotate(360deg); }
}
.box {
animation: slide 3s linear infinite, rotate 1.5s linear infinite;
}动画事件监听
通过 JavaScript 监听动画事件（如开始、结束）：
const box = document.querySelector('.box');
box.addEventListener('animationstart', () => console.log('动画开始'));
box.addEventListener('animationend', () => console.log('动画结束'));性能优化
优先使用 transform 和 opacity 属性，它们会触发 GPU 加速，避免使用 left/top 等可能引发重排的属性。启用硬件加速示例：
.box {
transform: translateZ(0);
}响应式动画
结合媒体查询调整动画行为：
@media (max-width: 600px) {
.box { animation-duration: 1s; }
}
