css3 动画制作

关键属性与基础语法

CSS3动画通过@keyframes规则和动画属性实现。定义关键帧需指定动画名称和阶段样式，例如：

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

应用动画时使用简写属性：

.element {
  animation: slideIn 1s ease-in-out forwards;
}

核心动画属性详解

animation-name
绑定@keyframes定义的动画名称，如slideIn。

animation-duration
设置动画周期时长，单位可为秒（1s）或毫秒（500ms）。

animation-timing-function
控制速度曲线：

• ease（默认）：慢快慢
• linear：匀速
• cubic-bezier()：自定义贝塞尔曲线

animation-delay
定义动画开始前的延迟时间，负值使动画从中间开始。

animation-iteration-count
指定重复次数：infinite表示无限循环。

animation-direction
控制播放方向：

• normal（默认）
• reverse（反向播放）
• alternate（往返交替）

animation-fill-mode
决定动画结束后的状态：

• forwards：保留最后一帧样式
• backwards：应用第一帧样式
• both：结合两者特性

复合动画示例

组合多个动画效果：

@keyframes fadeAndRotate {
  0% { opacity: 0; transform: rotate(0deg); }
  100% { opacity: 1; transform: rotate(360deg); }
}

.box {
  animation: fadeAndRotate 2s ease-in 0.5s infinite alternate;
}

性能优化建议

优先使用transform和opacity属性，这些属性不会触发重排（reflow），可通过GPU加速。避免频繁修改width、height或margin等属性。

浏览器兼容处理

添加前缀确保兼容旧版浏览器：

@-webkit-keyframes example { /*...*/ }
.element {
  -webkit-animation: example 2s;
  animation: example 2s;
}

调试技巧

使用浏览器开发者工具的Animations面板（Chrome）可视化调试时间轴，调整缓动函数和持续时间。