𝑻𝒆𝒏𝑪𝒍𝒂𝒘正在头脑风暴···

𝑻𝒆𝒏𝑲𝒊𝑺𝒆𝒀𝒂の𝑨𝒈𝒆𝒏𝒕助手

𝑻𝒆𝒏-𝒇𝒍𝒂𝒔𝒉

深入理解CSS动画与过渡效果

作为一名前端开发者，我必须承认，掌握CSS动画曾经是我的一大挑战。看到那些流畅动感的网页效果，心里既羡慕又有点畏惧。但通过不断实践和学习，我发现CSS动画其实并不复杂。今天就以过来人的身份，手把手带你走进CSS动画的世界。

一、CSS动画概述

为什么需要动画？

动画不是简单的”花哨效果”，而是：

提升用户体验：让界面更生动，操作更直观
提供视觉反馈：告诉用户当前发生了什么
引导用户注意力：突出重要信息
增强品牌个性：让网站更有特色

/* 好的动画 vs 坏的动画 */
/* 好的：平滑、自然、有意义 */
button {
  transition: all 0.3s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* 坏的：突兀、闪烁、干扰视线 */
button {
  animation: blink 0.5s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

CSS动画的两种方式

CSS提供了两种实现动画的方式：

过渡（Transition）：状态改变时的平滑过渡
动画（Animation）：更复杂的、可控制的动画序列

/* 过渡 - 简单状态变化 */
.element {
  transition: all 0.3s ease;
}

.element:hover {
  transform: scale(1.1);
}

/* 动画 - 复杂序列 */
.element {
  animation: moveAndFade 2s infinite;
}

@keyframes moveAndFade {
  0% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(100px); opacity: 0.5; }
  100% { transform: translateX(0); opacity: 1; }
}

二、CSS过渡（Transition）

基础语法

/* 最简单的过渡 */
.element {
  transition: property duration timing-function delay;
}

/* 实际例子 */
.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: #e74c3c;
}

transition-property

/* 过渡所有属性 */
.element {
  transition: all 0.3s ease;
}

/* 过渡特定属性 */
.element {
  transition: background-color 0.3s ease, 
              transform 0.3s ease,
              opacity 0.3s ease;
}

/* 也可以使用shorthand写法 */
.element {
  transition: all 0.3s ease 0.1s;
}

transition-duration

/* 不同时长效果 */
.fast {
  transition-duration: 0.2s; /* 快速 */
}

.normal {
  transition-duration: 0.5s; /* 正常 */
}

.slow {
  transition-duration: 1s; /* 慢速 */
}

.button {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

transition-timing-function

/* 缓动函数示例 */
.linear { transition-timing-function: linear; }
.ease { transition-timing-function: ease; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
.cubic-bezier { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* 贝塞尔曲线工具 */
/* https://cubic-bezier.com/ */

/* 实际应用例子 */
.bounce {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce:hover {
  transform: scale(1.2);
}

transition-delay

/* 延迟效果 */
.element {
  transition: transform 0.3s ease 0.2s; /* 延迟0.2秒 */
}

/* 多个元素的延迟动画 */
.menu-item {
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.menu-item:nth-child(1) { transition-delay: 0.1s; }
.menu-item:nth-child(2) { transition-delay: 0.2s; }
.menu-item:nth-child(3) { transition-delay: 0.3s; }

/* 当菜单展开时 */
.menu.open .menu-item {
  transform: translateX(0);
}

实际应用示例

/* 卡片悬停效果 */
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

/* 模态框淡入淡出 */
.modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

/* 抽屉菜单 */
.drawer {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.drawer.open {
  transform: translateX(0);
}

<!-- 卡片示例 -->
<div class="card">
  <img src="https://picsum.photos/seed/card1/300/200.jpg" alt="Card Image">
  <div class="card-content">
    <h3>卡片标题</h3>
    <p>这里是卡片内容描述</p>
    <button>查看详情</button>
  </div>
</div>

<style>
.card {
  max-width: 300px;
  margin: 20px;
  cursor: pointer;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

.card h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.card p {
  color: #666;
  margin-bottom: 15px;
}

.card button {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.card:hover button {
  background: #2980b9;
  transform: scale(1.05);
}
</style>

三、CSS动画（Animation）

@keyframes基础

/* 定义关键帧 */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 应用动画 */
.element {
  animation: slideIn 1s ease forwards;
}

animation属性详解

/* 完整的animation语法 */
.element {
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

/* 实际例子 */
.element {
  animation: slideIn 0.5s ease 0.2s 1 forwards;
}

animation-name

/* 多个动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-20px); }
  to { transform: translateY(0); }
}

/* 组合使用 */
.element {
  animation: fadeIn 0.5s ease, slideDown 0.5s ease 0.2s;
}

animation-duration

/* 不同的动画时长 */
.element {
  animation-duration: 2s;
}

/* 相对单位 */
.element {
  animation-duration: 1s; /* 快速 */
  animation-duration: 0.5s; /* 中速 */
  animation-duration: 2s; /* 慢速 */
}

animation-timing-function

/* 各种缓动函数 */
.linear { animation-timing-function: linear; }
.ease { animation-timing-function: ease; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }
.cubic-bezier { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* 步骤函数 */
.steps {
  animation-timing-function: steps(4);
}

/* 脉冲效果 */
.pulse {
  animation: pulse 1.5s infinite;
  animation-timing-function: ease-in-out;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

animation-delay

/* 延迟动画 */
.element {
  animation: move 1s ease 2s infinite;
}

/* 链式动画 */
.element {
  animation: 
    fadeIn 0.5s ease,
    slideDown 0.5s ease 0.5s,
    scale 0.3s ease 1s;
}

animation-iteration-count

/* 迭代次数 */
.once { animation-iteration-count: 1; }
.infinite { animation-iteration-count: infinite; }
.three-times { animation-iteration-count: 3; }

/* 脉冲动画 */
.element {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

animation-direction

/* 动画方向 */
.normal { animation-direction: normal; }
.reverse { animation-direction: reverse; }
.alternate { animation-direction: alternate; }
.alternate-reverse { animation-direction: alternate-reverse; }

/* 示例 - 摇摆动画 */
.swing {
  animation: swing 2s ease-in-out infinite alternate;
}

@keyframes swing {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(15deg); }
}

animation-fill-mode

/* 填充模式 */
.forwards { animation-fill-mode: forwards; }
.backwards { animation-fill-mode: backwards; }
.both { animation-fill-mode: both; }

/* 进入动画前的状态 */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.element {
  animation: slideIn 0.5s ease forwards;
  opacity: 0;
}

/* 动画结束后的状态 */
.element {
  animation: slideOut 0.5s ease forwards;
}

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

四、高级动画技巧

贝塞尔曲线动画

/* 自定义贝塞尔曲线 */
@keyframes custom-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.bounce {
  animation: custom-bounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 弹性动画 */
@keyframes elastic-scale {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.elastic {
  animation: elastic-scale 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

复杂组合动画

/* 加载动画 */
.loader {
  width: 50px;
  height: 50px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 彩虹文字动画 */
.rainbow-text {
  background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 3s ease infinite;
}

@keyframes rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 打字机效果 */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

滚动触发动画

/* 滚动动画 */
.scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 交错动画 */
.stagger-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.stagger-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-item:nth-child(1) { transition-delay: 0.1s; }
.stagger-item:nth-child(2) { transition-delay: 0.2s; }
.stagger-item:nth-child(3) { transition-delay: 0.3s; }
.stagger-item:nth-child(4) { transition-delay: 0.4s; }

// 滚动监听（需要配合JavaScript）
function handleScroll() {
  const elements = document.querySelectorAll('.scroll-animate');
  
  elements.forEach(element => {
    const rect = element.getBoundingClientRect();
    const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
    
    if (isVisible) {
      element.classList.add('visible');
    }
  });
}

window.addEventListener('scroll', handleScroll);
window.addEventListener('load', handleScroll);

五、动画性能优化

GPU加速

/* 使用transform和opacity触发GPU加速 */
.element {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
}

/* 优化动画性能 */
.element {
  will-change: transform, opacity;
}

/* 动画结束后移除will-change */
.element.animating {
  will-change: transform, opacity;
}

.element.not-animating {
  will-change: auto;
}

避免重绘和重排

/* 不好的动画 - 触发重排 */
.bad-animation {
  width: 100px;
  height: 100px;
  background: red;
  animation: bad-move 2s infinite;
}

@keyframes bad-move {
  from { margin-left: 0; }
  to { margin-left: 100px; }
}

/* 好的动画 - 只触发重绘 */
.good-animation {
  width: 100px;
  height: 100px;
  background: red;
  animation: good-move 2s infinite;
}

@keyframes good-move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

合理的动画时长

/* 快速反馈动画 */
.button {
  transition: all 0.15s ease;
}

.button:hover {
  transform: scale(1.05);
}

/* 中等复杂度的动画 */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

/* 大型动画 */
.slide-up {
  animation: slideUp 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

六、实际应用案例

案例1：加载状态动画

/* 加载 spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}

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

/* 骨架屏加载 */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 进度条加载 */
.progress-bar {
  width: 100%;
  height: 4px;
  background: #f0f0f0;
  overflow: hidden;
}

.progress-bar::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #3498db;
  animation: progress 2s ease infinite;
}

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

案例2：导航菜单动画

/* 侧边栏菜单 */
.sidebar {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100vh;
  background: white;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  z-index: 1000;
}

.sidebar.active {
  transform: translateX(300px);
}

/* 菜单项 */
.menu-item {
  padding: 20px;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(-20px);
}

.sidebar.active .menu-item {
  opacity: 1;
  transform: translateX(0);
}

.sidebar.active .menu-item:nth-child(1) { transition-delay: 0.1s; }
.sidebar.active .menu-item:nth-child(2) { transition-delay: 0.2s; }
.sidebar.active .menu-item:nth-child(3) { transition-delay: 0.3s; }
.sidebar.active .menu-item:nth-child(4) { transition-delay: 0.4s; }

.menu-item:hover {
  background: #f8f9fa;
  padding-left: 30px;
}

/* 汉堡菜单按钮 */
.hamburger {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 30px;
  height: 20px;
  cursor: pointer;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #333;
  margin-bottom: 6px;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

<!-- 侧边栏菜单示例 -->
<div class="hamburger" id="menuToggle">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="sidebar" id="sidebar">
  <div class="menu-item">首页</div>
  <div class="menu-item">产品</div>
  <div class="menu-item">服务</div>
  <div class="menu-item">关于我们</div>
  <div class="menu-item">联系方式</div>
</div>

<script>
const menuToggle = document.getElementById('menuToggle');
const sidebar = document.getElementById('sidebar');

menuToggle.addEventListener('click', () => {
  menuToggle.classList.toggle('active');
  sidebar.classList.toggle('active');
});
</script>

案例3：图片画廊动画

/* 图片画廊容器 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* 图片卡片 */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* 图片 */
.gallery-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

/* 图片覆盖层 */
.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* 图片信息 */
.gallery-info {
  color: white;
  transform: translateY(20px);
  transition: transform 0.3s ease 0.1s;
}

.gallery-item:hover .gallery-info {
  transform: translateY(0);
}

/* 模态框 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  animation: scaleIn 0.3s ease;
}

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

@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 关闭按钮 */
.modal-close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: white;
  font-size: 30px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.modal-close:hover {
  transform: rotate(90deg);
}

<!-- 图片画廊示例 -->
<div class="gallery">
  <div class="gallery-item">
    <img src="https://picsum.photos/seed/gallery1/300/200.jpg" alt="Gallery Image 1">
    <div class="gallery-overlay">
      <div class="gallery-info">
        <h3>美丽风景</h3>
        <p>这是一个美丽的风景照片</p>
      </div>
    </div>
  </div>
  
  <div class="gallery-item">
    <img src="https://picsum.photos/seed/gallery2/300/200.jpg" alt="Gallery Image 2">
    <div class="gallery-overlay">
      <div class="gallery-info">
        <h3>城市夜景</h3>
        <p>繁华的都市夜景</p>
      </div>
    </div>
  </div>
  
  <div class="gallery-item">
    <img src="https://picsum.photos/seed/gallery3/300/200.jpg" alt="Gallery Image 3">
    <div class="gallery-overlay">
      <div class="gallery-info">
        <h3>自然风光</h3>
        <p>宁静的自然风光</p>
      </div>
    </div>
  </div>
  
  <div class="gallery-item">
    <img src="https://picsum.photos/seed/gallery4/300/200.jpg" alt="Gallery Image 4">
    <div class="gallery-overlay">
      <div class="gallery-info">
        <h3>艺术创作</h3>
        <p>创意艺术作品</p>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="imageModal">
  <span class="modal-close">&times;</span>
  <img src="" alt="Modal Image">
</div>

<script>
const galleryItems = document.querySelectorAll('.gallery-item');
const modal = document.getElementById('imageModal');
const modalImg = modal.querySelector('img');
const closeModal = document.querySelector('.modal-close');

galleryItems.forEach(item => {
  item.addEventListener('click', () => {
    const imgSrc = item.querySelector('img').src;
    modalImg.src = imgSrc;
    modal.classList.add('active');
  });
});

closeModal.addEventListener('click', () => {
  modal.classList.remove('active');
});

modal.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.classList.remove('active');
  }
});
</script>

七、动画库与工具

CSS动画库

<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<div class="animate__animated animate__bounce">
  这个元素会弹跳！
</div>

<!-- AOS (Animate On Scroll) -->
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<div data-aos="fade-up">
  滚动时会淡入并向上移动
</div>

<script>
AOS.init();
</script>

自定义动画框架

/* 自定义动画工具类 */
/* 淡入 */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

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

/* 滑入 */
.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  animation: slideInLeft 0.6s ease forwards;
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 缩放 */
.scale-in {
  opacity: 0;
  transform: scale(0.8);
  animation: scaleIn 0.5s ease forwards;
}

@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 弹性进入 */
.elastic-in {
  animation: elasticIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes elasticIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

<!-- 使用动画类 -->
<div class="card fade-in">
  卡片内容
</div>

<div class="feature slide-in-left">
  功能介绍
</div>

<div class="hero scale-in">
  主要内容
</div>

八、响应式动画

媒体查询动画

/* 基础动画 */
.element {
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .element {
    transition: all 0.5s ease; /* 移动端慢一点 */
  }
}

/* 移动端专用动画 */
@media (max-width: 768px) {
  .mobile-only {
    animation: mobileSlide 0.6s ease;
  }
  
  @keyframes mobileSlide {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

触摸设备优化

/* 触摸设备减少动画 */
@media (hover: none) {
  .element {
    transform: none;
    transition: none;
  }
  
  .element:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

九、常见问题与解决方案

问题1：动画卡顿

/* 优化前 - 卡顿的动画 */
.element {
  left: 0; /* 使用left会触发重排 */
  animation: move 1s linear infinite;
}

@keyframes move {
  to { left: 100%; }
}

/* 优化后 - 使用transform */
.element {
  transform: translateX(0);
  animation: move 1s linear infinite;
}

@keyframes move {
  to { transform: translateX(100vw); }
}

问题2：内存泄漏

/* 移除will-change */
.element:not(.animating) {
  will-change: auto;
}

/* 限制动画时长 */
.element {
  animation-duration: 2s;
  animation-iteration-count: 1; /* 限制次数 */
}

问题3：动画中断

/* 确保动画流畅 */
.element {
  animation-fill-mode: both; /* 保持状态 */
  will-change: transform, opacity;
}

/* 使用硬件加速 */
.element {
  transform: translateZ(0);
  backface-visibility: hidden;
}

十、总结与最佳实践

动画使用原则

有意义：动画应该服务于用户体验，而不是单纯为了好看
适度：不要过度使用动画，避免分散用户注意力
流畅：确保动画流畅自然，没有卡顿
可控：提供用户控制动画的选项（如减少动画运动）

性能优化要点

使用transform和opacity：避免使用width、height、margin等属性
启用硬件加速：使用transform: translateZ(0)或will-change
合理设置时长：快速反馈vs复杂动画有不同的时长需求
考虑性能：在低性能设备上减少动画效果

实用技巧

建立动画系统：定义统一的动画时间和缓动函数
使用变量：CSS变量让动画参数更容易维护
响应式考虑：根据设备和用户偏好调整动画
用户友好：提供减少动画的选项

/* 全局动画变量 */
:root {
  --animation-fast: 0.15s ease;
  --animation-normal: 0.3s ease;
  --animation-slow: 0.6s ease;
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 使用变量 */
.element {
  transition: var(--animation-normal);
}

.complex-animation {
  animation: complex 0.8s var(--ease-bounce) forwards;
}