动画制作css
CSS 动画制作基础
CSS 动画通过 @keyframes 规则和 animation 属性实现，无需 JavaScript 即可创建动态效果。
定义关键帧：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}应用动画：
.element {
animation: fadeIn 2s ease-in-out;
}常用动画属性
animation 是以下属性的简写：
animation-name: 指定@keyframes名称animation-duration: 动画持续时间（如2s）animation-timing-function: 速度曲线（ease,linear等）animation-delay: 延迟开始时间animation-iteration-count: 播放次数（infinite表示循环）animation-direction: 播放方向（normal,reverse,alternate）animation-fill-mode: 动画前后如何应用样式（forwards保留结束状态）
多阶段关键帧示例
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}
.ball {
animation: bounce 0.5s infinite;
}硬件加速优化
使用 transform 和 opacity 属性可获得最佳性能，因为现代浏览器会对其进行硬件加速：
@keyframes slide {
from { transform: translateX(-100px); }
to { transform: translateX(0); }
}动画事件监听
通过 JavaScript 监听动画事件：
const element = document.querySelector('.animated');
element.addEventListener('animationend', () => {
console.log('Animation finished');
});响应式动画技巧
结合 CSS 变量实现动态调整：
:root {
--anim-duration: 1s;
}
.box {
animation: spin var(--anim-duration) linear;
}
@media (max-width: 600px) {
:root {
--anim-duration: 0.5s;
}
}动画性能注意事项
- 避免同时激活过多动画
- 优先使用
transform和opacity进行动画 - 减少布局重排属性（如
width,height）的动画 - 使用
will-change属性预先声明变化元素：.animated-element { will-change: transform, opacity; }
