制作css动画

CSS动画基础

CSS动画通过@keyframes规则和animation属性实现。@keyframes定义动画序列，animation控制动画的播放方式。

定义关键帧

使用@keyframes规则创建动画序列，指定从0%到100%的样式变化：

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

应用动画

通过animation属性将动画绑定到元素：

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

动画属性详解

animation是以下子属性的简写：

• animation-name: 指定@keyframes名称
• animation-duration: 动画时长（如2s）
• animation-timing-function: 速度曲线（ease/linear等）
• animation-delay: 延迟开始时间
• animation-iteration-count: 播放次数（infinite表示无限循环）
• animation-direction: 播放方向（normal/alternate等）
• animation-fill-mode: 动画前后如何应用样式

实用动画示例

淡入效果：

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

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

弹跳效果：

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

.bounce {
  animation: bounce 0.8s infinite;
}

性能优化建议

优先使用transform和opacity属性制作动画，这些属性不会触发重排，性能更好。避免在动画中使用box-shadow等昂贵属性。

浏览器前缀

为确保兼容性，可能需要添加浏览器前缀：

.element {
  -webkit-animation: slideIn 1s;
  animation: slideIn 1s;
}