css3 动画制作

CSS3 动画制作基础

CSS3 动画通过 @keyframes 规则和 animation 属性实现。定义关键帧后，将其绑定到元素上即可触发动画效果。

定义关键帧的语法：

@keyframes 动画名称 {
  0% { /* 起始状态 */ }
  100% { /* 结束状态 */ }
}

应用动画的语法：

.element {
  animation: 动画名称 持续时间 速度曲线 延迟 播放次数 方向 填充模式;
}

关键属性说明

animation 子属性

• animation-name: 指定 @keyframes 名称
• animation-duration: 动画时长（如 2s）
• animation-timing-function: 速度曲线（ease/linear/cubic-bezier()）
• animation-delay: 延迟启动时间
• animation-iteration-count: 播放次数（infinite 表示无限循环）
• animation-direction: 播放方向（normal/reverse/alternate）
• animation-fill-mode: 动画外状态（forwards 保留结束帧）

实际示例

淡入效果

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation: fadeIn 1.5s ease-out;
}

弹跳动画

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.button {
  animation: bounce 0.8s infinite;
}

复合动画

通过逗号分隔可添加多个动画：

.element {
  animation: 
    fadeIn 1s ease-out,
    slideRight 2s 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

性能优化建议

• 优先使用 transform 和 opacity 属性（GPU加速）
• 避免动画触发重排（如改变 width/height）
• 使用 will-change: transform 预声明变化属性
• 减少同时运行的动画数量

浏览器兼容处理

添加前缀保证兼容性：

@-webkit-keyframes example { /* Safari/Chrome */ }
@-moz-keyframes example { /* Firefox */ }
.element {
  -webkit-animation: ...; /* Chrome/Safari/Opera */
  -moz-animation: ...; /* Firefox */
}

通过 CSS3 动画可以实现过渡、旋转、缩放等效果，相比 JavaScript 动画性能更高，适合实现视觉反馈和微交互。