CSS 动画与过渡效果

.button {
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  /* 对所有可过渡属性应用 0.3s 缓动 */
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);           /* 轻微上浮 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 阴影加深，制造悬浮感 */
}

.button:active {
  transform: translateY(0);              /* 按下回落 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card {
  transform: scale(1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  /* 分别为 transform 和 box-shadow 指定不同参数 */
  transition:
    transform 0.2s ease-out,
    box-shadow 0.4s ease-in-out;
}

.card:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

/* 自定义弹性曲线：结束时轻微回弹 */
.bouncy {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bouncy:hover {
  transform: scale(1.1);
}

/* 旋转加载器：linear 保证匀速旋转 */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* 脉冲加载器：用扩散阴影营造心跳感 */
.pulse {
  width: 40px;
  height: 40px;
  background-color: #007bff;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

/* 骨架屏微光扫过效果：内容加载前的占位动画 */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 37%,
    #f0f0f0 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

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

/* 打字机效果：用 steps() 做逐字符跳变 */
.typewriter {
  width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #333;
  animation:
    typing 3s steps(22, end),
    blink 0.7s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 22ch; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* 元素从下方淡入，结束后停留在最终状态 */
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards; /* forwards 保持结束帧 */
  animation-delay: 0.2s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 列表逐项进场：配合不同 delay 形成瀑布式入场 */
.list-item:nth-child(1) { animation-delay: 0.05s; }
.list-item:nth-child(2) { animation-delay: 0.10s; }
.list-item:nth-child(3) { animation-delay: 0.15s; }
.list-item:nth-child(4) { animation-delay: 0.20s; }

/* 使用 GPU 加速的属性组合 */
.gpu-accelerated {
  transform: translate3d(0, 0, 0); /* 提升为合成层 */
  opacity: 1;
}

/* will-change 提前告知浏览器：这个元素将要动画 */
.animated-element {
  will-change: transform, opacity;
  animation: move 2s ease-in-out;
}

@keyframes move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

/* 动画完成后务必移除 will-change，否则长期占用内存 */
.animated-element.finished {
  will-change: auto;
}

/* 反例：用 left 做位移会触发重排，掉帧 */
.bad-performance {
  position: relative;
  left: 0;
  transition: left 0.3s; /* ❌ 每帧都重排 */
}

/* 正例：等效效果用 transform，仅合成 */
.good-performance {
  transition: transform 0.3s; /* ✅ 只在合成层运行 */
}
.good-performance:hover {
  transform: translateX(100px);
}

/* 尊重系统级"减少动态效果"设置 */
@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;
  }
}

/* 或针对特定元素完全关闭动画 */
@media (prefers-reduced-motion: reduce) {
  .parallax-banner {
    animation: none;
    transition: none;
  }
}

.login-btn {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.login-btn.is-loading {
  pointer-events: none; /* 禁止重复点击 */
  opacity: 0.85;
}
.login-btn.is-loading .btn-text {
  opacity: 0;
}
.login-btn.is-loading .btn-spinner {
  opacity: 1;
  animation: spin 0.8s linear infinite;
}

/* 常见缓动曲线的贝塞尔等价写法 */
.ease        { transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
.ease-in     { transition-timing-function: cubic-bezier(0.42, 0, 1, 1); }
.ease-out    { transition-timing-function: cubic-bezier(0, 0, 0.58, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }

/* 自定义：Material Design 标准曲线 */
.md-standard { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
/* 强调曲线：快进慢出，突出重点元素 */
.md-emphasis { transition-timing-function: cubic-bezier(0.0, 0, 0.2, 1); }
/* 回弹曲线：y 超过 1，结束时越界再弹回 */
.overshoot   { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* 精灵图逐帧动画：一张 800px 宽的图含 8 帧，每帧 100px */
.sprite {
  width: 100px;
  height: 100px;
  background: url('/walk-sprite.png') 0 0 / 800px 100px;
  /* steps(8) 让背景位置在 8 个位置间跳变，形成逐帧播放 */
  animation: walk 0.8s steps(8) infinite;
}

@keyframes walk {
  from { background-position: 0 0; }
  to   { background-position: -800px 0; } /* 移过整张图 */
}

/* 三个圆点的加载动画，用负延迟错开相位形成跳动波浪 */
.dot { animation: bounce 1.2s ease-in-out infinite; }
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}

/* 用 CSS 变量批量生成交错延迟（配合内联 style 传入 --i） */
.stagger-item {
  animation: fadeInUp 0.5s ease-out backwards;
  animation-delay: calc(var(--i) * 60ms);
}

/* 翻牌效果：鼠标悬停时卡片沿 Y 轴翻转 180 度 */
.flip-card {
  perspective: 1000px; /* 透视距离，越小透视越夸张 */
}
.flip-card__inner {
  position: relative;
  transform-style: preserve-3d;      /* 保留子元素的 3D 空间 */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.flip-card:hover .flip-card__inner {
  transform: rotateY(180deg);
}
.flip-card__front,
.flip-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;       /* 隐藏背面，翻转时才不穿帮 */
}
.flip-card__back {
  transform: rotateY(180deg);
}

/* 1. 滚动驱动动画：进度条随页面滚动填充，无需 JS 监听 scroll */
.progress-bar {
  animation: grow linear;
  animation-timeline: scroll(root block); /* 绑定到根滚动条 */
}
@keyframes grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 2. 元素进入视口时触发动画（view-timeline） */
.reveal {
  animation: fadeInUp 0.6s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

/* 3. 离散属性过渡：让 display:none 也能优雅淡出 */
.dialog {
  transition: opacity 0.3s, display 0.3s allow-discrete;
}
@starting-style {
  .dialog[open] { opacity: 0; } /* 定义进入前的起始态 */
}

/* 修复前：top 触发重排 + 全局 will-change */
.card-old {
  position: relative;
  top: 20px;
  will-change: transform, opacity, top; /* ❌ 常驻，太多层 */
  transition: top 0.4s, opacity 0.4s;
}

/* 修复后：transform 只走合成，will-change 仅在动画期间加 */
.card {
  opacity: 0;
  transform: translateY(20px);
}
.card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

/* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
.el {
  animation: slide 0.6s ease-out 0.2s 1 normal forwards running;
}

/* 两个时间值时：第一个是 duration，第二个是 delay */
.el2 {
  animation: pulse 2s 0.5s infinite; /* 时长 2s，延迟 0.5s，无限循环 */
}

/* 多个动画叠加：逗号分隔，各自独立 */
.el3 {
  animation:
    fadeIn 0.4s ease-out,
    slideUp 0.6s ease-out 0.1s,
    glow 2s ease-in-out 0.6s infinite;
}

/* 带延迟的入场：用 backwards/both 让元素在 delay 期间就先隐藏 */
.enter {
  opacity: 1; /* 原始态是可见 */
  animation: fadeInUp 0.5s ease-out 0.3s both;
  /* 若用 none：delay 的 0.3s 里元素先可见，动画一开始又跳回透明，产生闪烁 */
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 无缝滚动的 logo 墙，鼠标悬停时暂停 */
.marquee {
  display: flex;
  gap: 40px;
  animation: scroll-x 20s linear infinite;
}
.marquee:hover {
  animation-play-state: paused; /* 悬停暂停，移开继续，不丢进度 */
}

@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 配合内容复制一份实现无缝 */
}

/* 通知徽章：弹入 + 抖动强调 */
.notify-badge {
  animation: pop-shake 1.2s ease-in-out;
}

@keyframes pop-shake {
  0%   { transform: scale(0) rotate(0); opacity: 0; }
  40%  { transform: scale(1.2) rotate(0); opacity: 1; } /* 过冲弹入 */
  55%  { transform: scale(1) rotate(-12deg); }
  70%  { transform: scale(1) rotate(12deg); }           /* 左右抖动 */
  85%  { transform: scale(1) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); }               /* 归位 */
}

/* 心跳动画：两次快跳 + 一次长停 */
.heartbeat {
  animation: heartbeat 1.4s ease-in-out infinite;
}
@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.3); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.3); }
  70%  { transform: scale(1); } /* 后半段停顿，模拟心跳节律 */
}

/* 一套关键帧，通过变量控制方向、距离、时长 */
.reveal {
  --distance: 24px;
  --duration: 0.5s;
  animation: reveal var(--duration) ease-out both;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(var(--distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 不同元素复用同一关键帧，只改变量 */
.reveal.from-left  { --distance: -40px; } /* 需配合 translateX 版关键帧 */
.reveal.slow       { --duration: 1s; }

/* 交错入场：用 --i 由内联 style 传入索引，纯 CSS 算延迟 */
.stagger > * {
  animation: reveal 0.5s ease-out both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

/* 注册一个可动画的数值型自定义属性 */
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.counter {
  counter-reset: num var(--num);
  animation: count-up 2s ease-out forwards;
}
.counter::after {
  content: counter(num); /* 把变量渲染成文字 */
}

@keyframes count-up {
  from { --num: 0; }
  to   { --num: 1280; } /* 数字从 0 平滑跳到 1280 */
}

@property --p {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

.ring {
  --p: 0%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#007bff var(--p), #eee 0);
  animation: fill 1.5s ease-out forwards;
}

@keyframes fill {
  to { --p: 75%; } /* 环形填充到 75% */
}

.btn {
  transform: translateY(0);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.2s ease;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); } /* 悬停浮起 */
.btn:active { transform: translateY(1px);  box-shadow: 0 2px 6px  rgba(0,0,0,.12); } /* 按下回落 */
.btn:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; } /* 键盘聚焦才显焦点环 */
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* 开启视图过渡（需 JS 用 document.startViewTransition 触发切换） */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
}

/* 给共享元素命名，浏览器自动在新旧页面间做形变过渡 */
.thumbnail {
  view-transition-name: hero-image;
}

/* 调试时给动画临时放慢，方便肉眼检查中间帧 */
* { animation-duration: 3s !important; transition-duration: 3s !important; }

/* 1. 三点跳动（负延迟错相位） */
.loading-dots span {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  animation: dot-bounce 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* 2. 进度条无限来回（不确定进度时用） */
.indeterminate-bar {
  position: relative;
  height: 4px;
  overflow: hidden;
  background: #eee;
}
.indeterminate-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: #007bff;
  animation: bar-slide 1.2s ease-in-out infinite;
}
@keyframes bar-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(350%); }
}