制作css动画
CSS动画基础
CSS动画通过@keyframes规则和animation属性实现。@keyframes定义动画序列，animation控制动画的播放方式。
定义关键帧
使用@keyframes规则创建动画序列，指定从0%到100%的样式变化：
@keyframes slideIn {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}应用动画
通过animation属性将动画绑定到元素：
.element {
animation: slideIn 1s ease-in-out;
}动画属性详解
animation是以下子属性的简写：
animation-name: 指定@keyframes名称animation-duration: 动画时长（如2s）animation-timing-function: 速度曲线（ease/linear等）animation-delay: 延迟开始时间animation-iteration-count: 播放次数（infinite表示无限循环）animation-direction: 播放方向（normal/alternate等）animation-fill-mode: 动画前后如何应用样式
实用动画示例
淡入效果：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}弹跳效果：
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce {
animation: bounce 0.8s infinite;
}性能优化建议
优先使用transform和opacity属性制作动画，这些属性不会触发重排，性能更好。避免在动画中使用box-shadow等昂贵属性。
浏览器前缀
为确保兼容性，可能需要添加浏览器前缀：
.element {
-webkit-animation: slideIn 1s;
animation: slideIn 1s;
}
