css动画制作原理
CSS动画制作原理
CSS动画通过关键帧（@keyframes）和动画属性（如animation-name、animation-duration等）实现。其核心原理分为两部分：定义动画序列和控制动画行为。
关键帧（@keyframes）
关键帧用于定义动画的中间状态。通过百分比或from/to指定动画在不同时间点的样式变化。例如：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}动画属性
通过以下属性将关键帧应用到元素并控制动画行为：
animation-name: 绑定关键帧名称。animation-duration: 设定动画持续时间（如2s）。animation-timing-function: 控制速度曲线（如ease-in-out）。animation-delay: 设置延迟启动时间。animation-iteration-count: 定义播放次数（infinite表示无限循环）。animation-direction: 控制播放方向（如alternate往返播放）。animation-fill-mode: 指定动画结束后的样式状态（如forwards保留最后一帧）。
示例代码
.box {
animation-name: fadeIn;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
}硬件加速优化
为提高性能，可通过transform和opacity属性触发GPU加速：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}复合动画
通过组合多个关键帧和属性实现复杂效果：
@keyframes moveAndFade {
0% { transform: translateY(0); opacity: 1; }
50% { transform: translateY(50px); opacity: 0.5; }
100% { transform: translateY(100px); opacity: 0; }
}
