css动漫制作
CSS动画制作基础
CSS动画通过@keyframes和animation属性实现。定义关键帧后，将其绑定到元素上并设置持续时间、延迟等参数。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}常用动画属性
animation是以下子属性的简写：
animation-name: 指定@keyframes名称animation-duration: 动画持续时间（如3s）animation-timing-function: 速度曲线（ease,linear等）animation-delay: 开始前延迟animation-iteration-count: 播放次数（infinite表示循环）animation-direction: 播放方向（alternate表示往返）
多关键帧动画
在@keyframes中可以设置多个中间状态：
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}动画组合
通过逗号分隔可同时应用多个动画：
.element {
animation: fadeIn 2s, bounce 1s 2s;
}性能优化建议
优先使用transform和opacity属性，这些属性不会触发重排：
- 避免动画中使用
width/height/margin等 - 使用
will-change: transform;提示浏览器优化 - 对移动设备减少复杂动画
动画事件监听
JavaScript可监听动画事件：
animationstart: 动画开始animationend: 动画结束animationiteration: 每次循环触发
element.addEventListener('animationend', () => {
console.log('动画结束');
});浏览器兼容性
所有现代浏览器均支持CSS动画。对于老旧浏览器需加前缀：
@-webkit-keyframes example { /*...*/ }
.element {
-webkit-animation: example 2s;
animation: example 2s;
}
