CSS 动画完全指南：从基础到高级

/* 基础过渡 */
.button {
  background-color: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2563eb;
}

/* 多属性过渡 */
.card {
  transform: scale(1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
}

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

.advanced-transition {
  transition-property: transform, opacity, background-color;
  transition-duration: 0.3s, 0.5s, 0.2s;
  transition-timing-function: ease-out, ease-in, linear;
  transition-delay: 0s, 0.1s, 0.2s;
}

/* 简写形式 */
.shorthand {
  transition: transform 0.3s ease-out 0s,
              opacity 0.5s ease-in 0.1s,
              background-color 0.2s linear 0.2s;
}

/* 定义关键帧 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 使用百分比定义关键帧 */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

/* 应用动画 */
.fade-in {
  animation: fadeIn 0.6s ease-out;
}

.bounce-element {
  animation: bounce 2s infinite;
}

/* 复杂动画配置 */
.complex-animation {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-play-state: running;
}

/* 简写形式 */
.shorthand-animation {
  animation: fadeIn 1s ease-in-out 0.5s 2 alternate both running;
}

/* 2D 变换 */
.transform-2d {
  /* 平移 */
  transform: translate(50px, 100px);
  transform: translateX(50px);
  transform: translateY(100px);
  
  /* 缩放 */
  transform: scale(1.5);
  transform: scaleX(2);
  transform: scaleY(0.5);
  
  /* 旋转 */
  transform: rotate(45deg);
  
  /* 倾斜 */
  transform: skew(30deg, 20deg);
  transform: skewX(30deg);
  transform: skewY(20deg);
  
  /* 组合变换 */
  transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}

/* 3D 变换 */
.transform-3d {
  /* 3D 平移 */
  transform: translate3d(50px, 100px, 25px);
  transform: translateZ(25px);
  
  /* 3D 旋转 */
  transform: rotateX(45deg);
  transform: rotateY(45deg);
  transform: rotateZ(45deg);
  transform: rotate3d(1, 1, 1, 45deg);
  
  /* 3D 缩放 */
  transform: scale3d(1.5, 1.5, 1.5);
  transform: scaleZ(2);
}

/* 3D 透视 */
.perspective-container {
  perspective: 1000px;
  perspective-origin: center center;
}

.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card-3d:hover {
  transform: rotateY(180deg);
}

<!-- 旋转动画 -->
<div class="animate-spin w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>

<!-- 脉冲动画 -->
<div class="animate-ping w-4 h-4 bg-blue-500 rounded-full"></div>

<!-- 呼吸动画 -->
<div class="animate-pulse bg-gray-300 h-4 rounded"></div>

<!-- 弹跳动画 -->
<div class="animate-bounce w-8 h-8 bg-blue-500 rounded-full"></div>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'scale-in': 'scaleIn 0.2s ease-out',
        'wiggle': 'wiggle 1s ease-in-out infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(100%)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        scaleIn: {
          '0%': { transform: 'scale(0.9)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      }
    }
  }
}

<!-- 使用自定义动画 -->
<div class="animate-fade-in">淡入效果</div>
<div class="animate-slide-up">上滑效果</div>
<div class="animate-scale-in">缩放效果</div>
<div class="animate-wiggle">摆动效果</div>

<!-- 响应式动画 -->
<div class="animate-none md:animate-bounce">
  桌面端才有弹跳动画
</div>

<!-- 悬停动画 -->
<button class="transition-all duration-300 hover:scale-105 hover:shadow-lg">
  悬停缩放
</button>

<!-- 焦点动画 -->
<input class="transition-all duration-200 focus:scale-105 focus:shadow-md" type="text">

<!-- 组合状态 -->
<div class="transform transition-all duration-300 hover:scale-110 hover:rotate-3 hover:shadow-xl">
  复合动画效果
</div>

/* 使用 transform 和 opacity 获得最佳性能 */
.optimized-animation {
  /* 启用硬件加速 */
  transform: translateZ(0);
  /* 或者 */
  will-change: transform, opacity;
  
  /* 避免触发重排的属性 */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 避免的属性（会触发重排） */
.avoid-these {
  /* 不推荐 */
  transition: width 0.3s ease, height 0.3s ease, left 0.3s ease;
}

/* 推荐的替代方案 */
.recommended {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 动画序列 */
@keyframes complexSequence {
  0% {
    transform: translateX(-100px) scale(0.5);
    opacity: 0;
  }
  25% {
    transform: translateX(0) scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: translateX(20px) scale(1.1);
    opacity: 0.8;
  }
  75% {
    transform: translateX(-5px) scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.complex-element {
  animation: complexSequence 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

<!-- CSS 实现的交互式卡片 -->
<div class="card-container">
  <div class="card">
    <div class="card-front">
      <h3>卡片正面</h3>
    </div>
    <div class="card-back">
      <h3>卡片背面</h3>
    </div>
  </div>
</div>

.card-container {
  perspective: 1000px;
  width: 300px;
  height: 200px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  cursor: pointer;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card-front {
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.card-back {
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  color: white;
  transform: rotateY(180deg);
}

<!-- 旋转加载器 -->
<div class="flex items-center justify-center">
  <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
</div>

<!-- 脉冲加载器 -->
<div class="flex space-x-1">
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.1s"></div>
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
</div>

/* 页面淡入 */
.page-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-exit {
  opacity: 1;
  transform: translateY(0);
}

.page-exit-active {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

<!-- 按钮微交互 -->
<button class="
  px-6 py-3 
  bg-blue-500 text-white 
  rounded-lg font-medium
  transform transition-all duration-150
  hover:scale-105 hover:bg-blue-600
  active:scale-95
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
">
  点击我
</button>

<!-- 输入框微交互 -->
<div class="relative">
  <input 
    type="text" 
    class="
      w-full px-4 py-2 
      border border-gray-300 rounded-lg
      transition-all duration-200
      focus:border-blue-500 focus:ring-2 focus:ring-blue-200
      focus:scale-105
    "
    placeholder="输入内容..."
  >
</div>