CSS 动画与过渡：让页面动起来

/* 分别定义 */
.box {
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

/* 简写形式（推荐） */
.box {
  transition: background-color 0.3s ease 0s;
}

.card {
  width: 200px;
  height: 200px;
  background: #3498db;
  transition: width 0.3s ease,
              height 0.3s ease,
              background-color 0.5s ease-in;
}

.card:hover {
  width: 300px;
  height: 300px;
  background-color: #e74c3c;
}

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

/* 五种内置缓动函数 */
.slow-start {
  transition-timing-function: ease;           /* 慢→快→慢，默认 */
}
.linear-motion {
  transition-timing-function: linear;         /* 匀速 */
}
.fast-start {
  transition-timing-function: ease-in;        /* 慢→快 */
}
.fast-end {
  transition-timing-function: ease-out;       /* 快→慢 */
}
.ease-both {
  transition-timing-function: ease-in-out;    /* 慢→快→慢，比 ease 更平缓 */
}

.bounce {
  /* 回弹效果：超出目标再拉回 */
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.elastic {
  /* 弹性伸缩效果 */
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 分成 4 帧，每帧结束时变化 */
.step-anim {
  transition-timing-function: steps(4, end);
}

/* 分成 4 帧，每帧开始时变化 */
.step-anim-start {
  transition-timing-function: steps(4, start);
}

.btn {
  background: #3498db;
  transform: scale(1);
  transition: all 0.2s ease;
}

.btn:hover {
  background: #2980b9;
  transform: scale(1.05);
}

.btn:active {
  transform: scale(0.95);
}

.btn:focus {
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.4);
}

<button onclick="toggleMenu()">菜单</button>
<div id="menu" class="menu">菜单内容</div>

<style>
.menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.menu.open {
  max-height: 500px; /* 足够大的值 */
}
</style>

<script>
function toggleMenu() {
  document.getElementById('menu').classList.toggle('open');
}
</script>

const el = document.querySelector('.box');
el.style.opacity = '0';
// 触发过渡（需要先读取一次布局值，避免合并）
requestAnimationFrame(() => {
  el.style.opacity = '1';
});

.accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion.open {
  max-height: 500px; /* 设置为一个比实际内容更大的值 */
}

.accordion {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.3s ease;
}

.accordion.open {
  transform: scaleY(1);
}

.accordion {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.accordion > .inner {
  overflow: hidden;
}

.accordion.open {
  grid-template-rows: 1fr;
}

/* 使用百分比定义多阶段 */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    transform: translateX(10%);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 只有开始和结束，可用 from/to 简写 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  /* 逐个定义 */
  animation-name: slideIn;          /* 动画名称 */
  animation-duration: 1s;           /* 持续时长 */
  animation-timing-function: ease;  /* 缓动函数 */
  animation-delay: 0s;              /* 延迟时间 */
  animation-iteration-count: 1;     /* 播放次数（infinite 为无限） */
  animation-direction: normal;      /* 方向 */
  animation-fill-mode: none;        /* 填充模式 */
  animation-play-state: running;    /* 播放状态 */

  /* 简写形式 */
  animation: slideIn 1s ease 0s 1 normal none running;
}

@keyframes move {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}

/* 正向：0 → 200px */
.dir-normal {
  animation-direction: normal;
}

/* 反向：200px → 0 */
.dir-reverse {
  animation-direction: reverse;
}

/* 交替：0→200px→0→200px... */
.dir-alternate {
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

/* 反向交替：200px→0→200px→0... */
.dir-alternate-reverse {
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}

/* 不保留任何样式（默认） */
.fill-none {
  animation: fadeIn 1s;
  /* 播放前：元素原始样式
     播放后：回到原始样式 */
}

/* 保留最后一帧 */
.fill-forwards {
  animation: fadeIn 1s;
  animation-fill-mode: forwards;
  /* 播放后：保持在 100% 帧的样式 */
}

/* 立即应用到第一帧 */
.fill-backwards {
  animation: fadeIn 1s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
  /* 播放前（包括 delay 期间）：保持 0% 帧的样式 */
}

/* 同时应用 forwards + backwards */
.fill-both {
  animation: fadeIn 1s;
  animation-delay: 1s;
  animation-fill-mode: both;
}

.spinner {
  animation:
    spin 1s linear infinite,
    pulse 2s ease-in-out infinite,
    colorShift 3s linear infinite;
}

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

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

@keyframes colorShift {
  0%   { border-color: #e74c3c; }
  33%  { border-color: #f1c40f; }
  66%  { border-color: #2ecc71; }
  100% { border-color: #e74c3c; }
}

const el = document.querySelector('.animated');

el.addEventListener('animationstart', (e) => {
  console.log('动画开始', e.animationName);
});

el.addEventListener('animationend', (e) => {
  console.log('动画结束', e.animationName);
  // 动画结束后移除元素
  el.remove();
});

el.addEventListener('animationiteration', (e) => {
  console.log('新一轮迭代开始', e.animationName);
});

<div class="toast">消息已发送</div>

<script>
const toast = document.querySelector('.toast');
toast.addEventListener('animationend', () => {
  toast.style.display = 'none';
});
</script>

<style>
.toast {
  animation: slideUp 0.3s ease forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>

.translate-demo {
  /* 单轴 */
  transform: translateX(50px);   /* X 轴右移 50px */
  transform: translateY(-30px);  /* Y 轴上移 30px */

  /* 双轴 */
  transform: translate(50px, -30px);

  /* 百分比：相对于自身宽高 */
  transform: translate(50%, -50%); /* 水平居中技巧 */
}

/* 经典水平垂直居中 */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rotate-demo {
  transform: rotate(45deg);    /* 顺时针 45° */
  transform: rotate(-90deg);   /* 逆时针 90° */
  transform: rotate(1turn);    /* 一整圈 */
  transform: rotate(0.5turn);  /* 半圈 */
}

.scale-demo {
  transform: scale(1.5);          /* 等比例放大 1.5 倍 */
  transform: scale(0.5);          /* 缩小一半 */
  transform: scaleX(2);           /* X 轴拉伸 2 倍 */
  transform: scaleY(0.8);         /* Y 轴压缩到 80% */
  transform: scale(1.2, 0.8);     /* X 和 Y 不同比例 */
}

.skew-demo {
  transform: skew(10deg);          /* X 轴倾斜 10° */
  transform: skew(10deg, 5deg);    /* X 轴 10°, Y 轴 5° */
  transform: skewX(-15deg);        /* X 轴反向倾斜 */
  transform: skewY(20deg);         /* Y 轴倾斜 */
}

/* matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) */
/* translate(50px, 30px) 等价于 */
transform: matrix(1, 0, 0, 1, 50, 30);

/* rotate(45deg) 等价于 */
transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0);

/* scale(2, 1.5) 等价于 */
transform: matrix(2, 0, 0, 1.5, 0, 0);

.origin-demo {
  transform: rotate(45deg);

  /* 关键字 */
  transform-origin: top left;       /* 左上角 */
  transform-origin: center;         /* 中心（默认） */
  transform-origin: right bottom;   /* 右下角 */

  /* 数值 */
  transform-origin: 0 0;            /* 左上角 */
  transform-origin: 100px 200px;    /* 指定坐标 */
  transform-origin: 50% 100%;       /* 底部中心 */
}

.pendulum {
  transform-origin: top center;
  animation: swing 1s ease-in-out infinite alternate;
}

@keyframes swing {
  from { transform: rotate(-30deg); }
  to   { transform: rotate(30deg); }
}

.three-d-demo {
  /* 3D 平移 */
  transform: translateZ(100px);       /* 向用户方向移动 */
  transform: translate3d(x, y, z);    /* 3D 平移简写 */

  /* 3D 旋转 */
  transform: rotateX(45deg);          /* 绕 X 轴旋转（上下翻转） */
  transform: rotateY(45deg);          /* 绕 Y 轴旋转（左右翻转） */
  transform: rotateZ(45deg);          /* 绕 Z 轴旋转（平面旋转，同 rotate()） */
  transform: rotate3d(x, y, z, deg);  /* 绕任意轴旋转 */

  /* 3D 缩放 */
  transform: scaleZ(1.5);             /* Z 轴缩放（影响厚度） */
  transform: scale3d(x, y, z);        /* 3D 缩放简写 */
}

/* 方式一：在父容器上设置透视 */
.scene {
  perspective: 800px;         /* 观察距离 800px */
  perspective-origin: 50% 50%; /* 观察点位置 */
}

.scene .card {
  transform: rotateY(45deg);
}

/* 方式二：在 transform 中直接设置 */
.card {
  transform: perspective(800px) rotateY(45deg);
}

.scene {
  perspective: 800px;
  transform-style: preserve-3d; /* 保留子元素 3D 位置 */
}

.card-front,
.card-back {
  backface-visibility: hidden;  /* 隐藏背面 */
}

.card-back {
  transform: rotateY(180deg);   /* 背面旋转 180° */
}

.card-face {
  backface-visibility: hidden;   /* 背面不可见 */
  /* 或 */
  backface-visibility: visible;  /* 背面可见（默认） */
}

JavaScript → Style → Layout → Paint → Composite

/* ❌ 不好：触发重排 */
.bad {
  animation: badMove 1s ease infinite;
}
@keyframes badMove {
  from { left: 0; }
  to   { left: 100px; }
}

/* ✅ 好：仅触复合层 */
.good {
  animation: goodMove 1s ease infinite;
}
@keyframes goodMove {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}

/* 告诉浏览器 opacity 将发生变化 */
.element {
  will-change: opacity;
}

/* 多个属性 */
.element {
  will-change: transform, opacity;
}

/* 告诉浏览器将创建新的层叠上下文 */
.element {
  will-change: transform;
}

const el = document.querySelector('.animated');

// 动画开始前添加
el.addEventListener('mouseenter', () => {
  el.style.willChange = 'transform';
});

// 动画结束后移除
el.addEventListener('transitionend', () => {
  el.style.willChange = 'auto';
});

/* 方法一：使用 will-change */
.gpu-layer {
  will-change: transform;
}

/* 方法二：使用 3D transform 强制提升 */
.gpu-layer {
  transform: translateZ(0);  /* 或 translate3d(0,0,0) */
}

/* 方法三：使用 backface-visibility */
.gpu-layer {
  backface-visibility: hidden;
}

<div class="spinner"></div>

<style>
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

<div class="progress-bar">
  <div class="progress-fill"></div>
</div>

<style>
.progress-bar {
  width: 300px;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  border-radius: 4px;
  animation: fillProgress 2s ease-out forwards;
}

@keyframes fillProgress {
  from { width: 0%; }
  to   { width: 80%; }
}
</style>

<div class="sprite-animation"></div>

<style>
.sprite-animation {
  width: 100px;          /* 一帧的宽度 */
  height: 100px;         /* 一帧的高度 */
  background: url('https://via.placeholder.com/600x100/3498db/ffffff?text=012345') no-repeat;
  /* 假设精灵图：6 帧水平排列，总宽 600px */
  background-size: 600px 100px;
  animation: spritePlay 0.6s steps(5, end) infinite;
}

@keyframes spritePlay {
  from {
    background-position: 0 0;      /* 第一帧 */
  }
  to {
    background-position: -600px 0; /* 最后一帧（超出，被 steps 截断） */
  }
}
</style>

.runner {
  width: 64px;
  height: 64px;
  background: url('run-sprite.png') no-repeat;
  /* 假设 8 帧横向排列，总宽 512px */
  background-size: 512px 64px;
  animation: run 0.8s steps(7, end) infinite;
}

@keyframes run {
  from { background-position: 0 0; }
  to   { background-position: -512px 0; }
}

function animate(element, targetX, duration = 1000) {
  const startX = parseFloat(getComputedStyle(element).left) || 0;
  const startTime = performance.now();

  function frame(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1); // 0 → 1

    // easeOut 缓动
    const eased = 1 - Math.pow(1 - progress, 3);
    const currentX = startX + (targetX - startX) * eased;

    element.style.transform = `translateX(${currentX}px)`;

    if (progress < 1) {
      requestAnimationFrame(frame);
    }
  }

  requestAnimationFrame(frame);
}

// 使用
const box = document.querySelector('.box');
animate(box, 300, 1500);

/* CSS 方式 */
.css-box {
  animation: slide 2s ease infinite alternate;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(300px); }
}

// WAAPI 方式（完全等价）
const box = document.querySelector('.waapi-box');
box.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(300px)' }
], {
  duration: 2000,
  easing: 'ease',
  iterations: Infinity,
  direction: 'alternate'
});