css3动画制作

CSS3 动画基础

CSS3 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式（如持续时间、延迟、循环次数等）。

关键帧语法示例：

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

动画属性示例：

.element {
  animation: slideIn 1s ease-in-out 0.5s infinite alternate;
}

• slideIn：动画名称。
• 1s：动画持续时间。
• ease-in-out：缓动函数（控制速度曲线）。
• 0.5s：延迟时间。
• infinite：无限循环（可选 2 等具体次数）。
• alternate：往返播放（可选 normal 或 reverse）。

常用动画效果示例

1. 淡入效果

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in { animation: fadeIn 0.5s; }

2. 旋转效果

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin { animation: spin 2s linear infinite; }

3. 弹跳效果

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 0.5s ease-in-out 3; }

控制动画的进阶属性

• animation-fill-mode：定义动画结束后的状态（如 forwards 保留最后一帧）。
• animation-play-state：通过 JavaScript 动态控制（如 paused 暂停动画）。
• 多动画组合：用逗号分隔多个动画名称和参数。

示例：

.box {
  animation: 
    fadeIn 1s forwards,
    slideIn 0.5s ease-out 1s;
}

性能优化建议

• 优先使用 transform 和 opacity，这些属性不会触发重排（性能更高）。
• 避免频繁动画影响性能，可使用 will-change: transform; 提示浏览器优化。
• 使用硬件加速：如 transform: translateZ(0);。

浏览器兼容性

• 现代浏览器（Chrome、Firefox、Safari、Edge）均支持 CSS3 动画。
• 前缀兼容（如 -webkit-）逐渐不再必要，但可通过工具（Autoprefixer）自动添加。

通过结合关键帧和动画属性，可以实现复杂的交互效果，适用于按钮反馈、页面过渡等场景。