动画

CSS动画是前端交互的重要组成部分，通过状态变化和过渡效果增强用户体验。以下是CSS动画的核心概念、实现方式和最佳实践：

一、CSS动画基础

1. 过渡（Transition）

• 作用：平滑过渡元素的两个状态（如悬停、点击）。
• 核心属性：

  transition: property duration timing-function delay;
  /* 示例 */
  transition: background-color 0.3s ease-in-out 0.1s;

• 常用属性：
  • property：过渡的CSS属性（如width、opacity、transform）。
  • duration：过渡时长（秒或毫秒）。
  • timing-function：缓动函数（如ease、linear、ease-in-out）。
  • delay：延迟开始时间。

2. 关键帧动画（Keyframes）

• 作用：定义多阶段的复杂动画。
• 语法：

  @keyframes animationName {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(200px); }
  }
  
  .element {
    animation: animationName 2s infinite alternate;
  }

• 核心属性：
  • animation-name：动画名称。
  • animation-duration：总时长。
  • animation-iteration-count：循环次数（infinite为无限循环）。
  • animation-direction：播放方向（normal、reverse、alternate）。
  • animation-timing-function：缓动函数。
  • animation-fill-mode：动画前后的状态（如forwards保持最后一帧）。

二、性能优化

1. 优先使用transform和opacity

• 原因：这两个属性不会触发布局回流（reflow），仅触发合成层（composite），性能最优。

  /* 推荐 */
  .box {
    transition: transform 0.3s ease;
  }
  .box:hover {
    transform: translateY(-10px);
  }
  
  /* 不推荐（触发重排） */
  .box:hover {
    margin-top: -10px;
  }

2. 使用will-change提示浏览器

• 作用：提前告知浏览器元素即将变化，优化渲染。

  .element {
    will-change: transform; /* 告诉浏览器transform即将变化 */
  }

3. 减少重排与重绘

• 重排（Reflow）：元素布局变化（如宽高、位置）。
• 重绘（Repaint）：外观变化（如颜色、透明度）。
• 优化技巧：
  • 批量修改样式（通过添加/删除class）。
  • 使用position: fixed/absolute脱离文档流。
  • 避免频繁读取布局信息（如offsetWidth）。

三、常见动画效果实现

1. 淡入淡出（Opacity）

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

.element {
  animation: fadeIn 1s ease forwards;
}

2. 缩放（Scale）

.element:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

3. 旋转（Rotate）

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loader {
  animation: spin 2s linear infinite;
}

4. 平移（Translate）

.button:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

5. 弹跳（Bounce）

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

.bounce:hover {
  animation: bounce 1s ease;
}

四、组合动画与复杂效果

1. 多属性组合

.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: translateY(-5px) rotate(5deg);
  background-color: #ff0000;
  color: white;
}

2. 交错动画（Stagger Animation）

通过延迟（animation-delay）实现元素序列的依次动画：

.item {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }

3. 悬停触发复杂动画

.card {
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card:hover {
  transform: translateY(-10px) scale(1.05);
}
.card:hover .icon {
  transform: rotate(360deg);
  transition: transform 0.8s ease;
}

五、与JavaScript结合

通过JS动态控制CSS动画：

// 添加/删除动画类
const element = document.querySelector('.box');
element.classList.add('animate');

// 监听动画结束事件
element.addEventListener('animationend', () => {
  console.log('动画结束');
});

// 动态修改CSS变量
document.documentElement.style.setProperty('--animation-duration', '2s');

六、注意事项与兼容性

1. 浏览器前缀：

   • 旧版浏览器需添加前缀（如-webkit-、-moz-）。
   • 现代浏览器（Chrome 63+、Firefox 60+、Safari 11+）已无需前缀。

2. 性能监控：

   • 使用Chrome DevTools的Performance面板分析动画性能。
   • 避免过多元素同时执行复杂动画。

3. 无障碍考虑：

   • 为闪烁动画添加prefers-reduced-motion媒体查询：

     @media (prefers-reduced-motion: reduce) {
       * {
         animation: none !important;
       }
     }

七、示例代码：卡片悬停动画

以下是一个完整的卡片悬停动画示例，展示了如何组合多种效果：

<style>
.card {
  width: 300px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.card-image {
  height: 200px;
  background: #eee;
  transition: transform 0.5s ease;
}

.card:hover .card-image {
  transform: scale(1.1);
}

.card-content {
  padding: 20px;
}

.card-title {
  margin: 0;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
}

.card:hover .card-title {
  transform: translateY(0);
  opacity: 1;
}
</style>

<div class="card">
  <div class="card-image"></div>
  <div class="card-content">
    <h3 class="card-title">标题</h3>
    <p class="card-text">内容...</p>
  </div>
</div>

八、总结

• **优先使用transform和opacity**提升性能。
• 组合动画通过关键帧（keyframes）和过渡（transition）实现复杂效果。
• 性能优化是核心，避免触发重排。
• 兼容性需考虑浏览器前缀和降级方案。

通过掌握这些技巧，你可以创建流畅、高效的CSS动画，为用户提供出色的视觉体验。