动画css制作
动画CSS制作方法
CSS动画通过@keyframes和animation属性实现动态效果，适用于元素的状态变化和复杂交互。
关键帧定义
使用@keyframes定义动画序列，指定从开始到结束的样式变化：
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}动画属性应用
通过animation将关键帧绑定到元素并配置参数：
.element {
animation: slideIn 1s ease-in-out 0.5s both;
}参数依次为：动画名称、持续时间、缓动函数、延迟、填充模式。
复合属性分解
animation-name: 指定@keyframes名称animation-duration: 动画周期（如2s）animation-timing-function: 速度曲线（ease/linear/cubic-bezier()）animation-delay: 启动延迟animation-iteration-count: 播放次数（infinite表示循环）animation-direction: 播放方向（alternate反向交替）animation-fill-mode: 结束状态保持（forwards保留最后一帧）
多阶段动画示例
定义百分比关键帧实现复杂序列：
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}硬件加速优化
使用transform和opacity属性触发GPU加速：
.optimized {
will-change: transform;
transform: translateZ(0);
}响应式动画控制
通过媒体查询调整动画参数：
@media (max-width: 768px) {
.element {
animation-duration: 0.5s;
}
}动画事件监听
JavaScript可监听动画生命周期：
element.addEventListener('animationend', () => {
console.log('动画结束');
});性能注意事项
- 避免频繁触发重排的属性（如
width/left） - 简化复杂选择器以减少样式计算
- 使用
requestAnimationFrame同步动画帧率
现代CSS特性
@media (prefers-reduced-motion)适配系统动画偏好- CSS Houdini实现自定义动画效果
scroll-timeline实现滚动驱动动画
实际应用案例
淡入效果
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.8s ease-out;
}旋转加载动画
@keyframes spin {
to { transform: rotate(360deg); }
}
.loader {
animation: spin 1s linear infinite;
border: 3px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-top-color: #3498db;
}悬停交互动画
.button {
transition: transform 0.3s;
}
.button:hover {
transform: scale(1.05);
}关键帧链式动画
@keyframes multiStep {
0% { opacity: 0; transform: scale(0.5); }
50% { opacity: 1; transform: scale(1.2); }
100% { transform: scale(1); }
}调试技巧
- Chrome DevTools的Animation面板可实时编辑和捕获动画
- 使用
animation-play-state: paused调试具体帧 - 通过
steps()函数实现帧动画效果
浏览器兼容方案
.element {
-webkit-animation: slideIn 1s; /* 旧版Webkit */
animation: slideIn 1s;
}
@-webkit-keyframes slideIn { ... }
@keyframes slideIn { ... }
