css制作动画
CSS动画基础
CSS动画通过@keyframes和animation属性实现。@keyframes定义动画的关键帧，animation将动画应用到元素上。
示例代码：
/* 定义关键帧 */
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* 应用动画 */
.element {
animation: slideIn 1s ease-in-out;
}关键属性
animation-name: 指定@keyframes名称。animation-duration: 动画持续时间（如2s）。animation-timing-function: 速度曲线（如ease、linear）。animation-delay: 动画延迟时间。animation-iteration-count: 播放次数（infinite表示无限循环）。animation-direction: 播放方向（如alternate往返播放）。
复合写法：
.element {
animation: slideIn 1s ease-in-out 0.5s infinite alternate;
}多关键帧动画
@keyframes可以定义多个中间状态：
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}触发动画
动画默认在页面加载时触发。通过JavaScript动态添加类名实现交互触发：
document.querySelector('.element').classList.add('animate');对应CSS：
.animate {
animation: slideIn 1s;
}性能优化
- 使用
transform和opacity属性（硬件加速性能更好）。 - 避免频繁触发重排（如修改
width、height）。
浏览器兼容性
- 前缀支持：旧版浏览器可能需要
-webkit-前缀（如-webkit-animation）。 - 使用工具（如Autoprefixer）自动添加前缀。
动画与过渡的区别
- CSS过渡（Transition）：需状态变化（如
:hover）触发，仅定义起始和结束状态。 - CSS动画（Animation）：可自动运行，支持多关键帧和复杂控制。
过渡示例：
.element {
transition: transform 0.3s ease;
}
.element:hover {
transform: rotate(45deg);
}
