css属性制作动画

CSS动画基础

CSS动画通过@keyframes和animation属性实现。@keyframes定义动画序列，animation控制动画表现。

定义关键帧：

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

应用动画：

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

常用动画属性

animation是复合属性，包含以下子属性：

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

示例：

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

变换动画效果

结合transform属性实现复杂动画：

@keyframes rotateScale {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.5); }
  100% { transform: rotate(360deg) scale(1); }
}

过渡动画

使用transition实现简单状态变化：

.button {
  transition: all 0.3s ease-out;
}
.button:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

性能优化建议

优先使用transform和opacity属性制作动画，这些属性不会触发重排：

• 避免动画中使用width/height/margin等属性
• 使用will-change提示浏览器优化：

  .animated-element {
  will-change: transform, opacity;
  }

实用动画示例

淡入淡出效果：

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

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

弹跳效果：

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