/** * dashboard-animations.css * 全局动画系统 — 为 Flask 仪表盘提供统一的动画基础设施 * * 接入说明: * 1. 在 index.html 中引入: * 2. 所有动画只操作 transform 和 opacity，确保 60fps 流畅度 * 3. 卡片入场使用 .card-float-in 类，自动按 nth-child 产生 stagger 延迟 * 4. 呼吸动画用于系统状态指示器，悬停动画用于所有可交互卡片 */ /* ─────────────────────────────── 1. 动画缓动变量 ─────────────────────────────── */ :root { /* 主缓动 — Material Design 标准缓动，自然流畅 */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* 减速缓动 — 元素进入时使用 */ --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* 加速缓动 — 元素退出时使用 */ --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* 弹性缓动 — 活泼的弹跳效果 */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* 动画时长变量 */ --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-enter: 600ms; /* Stagger 延迟基数 */ --stagger-base: 60ms; } /* ─────────────────────────────── 2. 卡片浮动入场动画 ─────────────────────────────── */ @keyframes cardFloatIn { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* 卡片入场类 — 给 entry-grid 的每个卡片添加 */ .card-float-in { opacity: 0; animation: cardFloatIn var(--duration-enter) var(--ease-decelerate) forwards; } /* 8 卡片 stagger 延迟 — 基于 nth-child */ .card-float-in:nth-child(1) { animation-delay: calc(var(--stagger-base) * 0); } .card-float-in:nth-child(2) { animation-delay: calc(var(--stagger-base) * 1); } .card-float-in:nth-child(3) { animation-delay: calc(var(--stagger-base) * 2); } .card-float-in:nth-child(4) { animation-delay: calc(var(--stagger-base) * 3); } .card-float-in:nth-child(5) { animation-delay: calc(var(--stagger-base) * 4); } .card-float-in:nth-child(6) { animation-delay: calc(var(--stagger-base) * 5); } .card-float-in:nth-child(7) { animation-delay: calc(var(--stagger-base) * 6); } .card-float-in:nth-child(8) { animation-delay: calc(var(--stagger-base) * 7); } /* 通用 stagger 工具类 — 适用于任意列表 */ .stagger-1 { animation-delay: calc(var(--stagger-base) * 0) !important; } .stagger-2 { animation-delay: calc(var(--stagger-base) * 1) !important; } .stagger-3 { animation-delay: calc(var(--stagger-base) * 2) !important; } .stagger-4 { animation-delay: calc(var(--stagger-base) * 3) !important; } .stagger-5 { animation-delay: calc(var(--stagger-base) * 4) !important; } .stagger-6 { animation-delay: calc(var(--stagger-base) * 5) !important; } .stagger-7 { animation-delay: calc(var(--stagger-base) * 6) !important; } .stagger-8 { animation-delay: calc(var(--stagger-base) * 7) !important; } /* ─────────────────────────────── 3. 呼吸脉冲动画 ─────────────────────────────── */ @keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } } /* 系统状态指示器呼吸效果 */ .breathe-pulse { animation: breathe 2s var(--ease-standard) infinite; } /* 慢速呼吸 — 用于低优先级指示 */ .breathe-slow { animation: breathe 3s var(--ease-standard) infinite; } /* 快速呼吸 — 用于告警状态 */ .breathe-fast { animation: breathe 1s var(--ease-standard) infinite; } /* ─────────────────────────────── 4. 悬停提升 + 阴影动画 ─────────────────────────────── */ .hover-lift { transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); will-change: transform, box-shadow; } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), 0 8px 24px rgba(0, 0, 0, 0.12); } /* 轻微提升 — 用于小元素 */ .hover-lift-sm:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm), 0 4px 12px rgba(0, 0, 0, 0.08); } /* 强提升 — 用于主卡片 */ .hover-lift-lg:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 12px 32px rgba(0, 0, 0, 0.15); } /* ─────────────────────────────── 5. 淡入淡出工具类 ─────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fade-in { opacity: 0; animation: fadeIn var(--duration-normal) var(--ease-standard) forwards; } .fade-out { animation: fadeOut var(--duration-normal) var(--ease-standard) forwards; } /* 延迟淡入工具类 */ .fade-in-delay-1 { animation-delay: calc(var(--stagger-base) * 1); } .fade-in-delay-2 { animation-delay: calc(var(--stagger-base) * 2); } .fade-in-delay-3 { animation-delay: calc(var(--stagger-base) * 3); } /* ─────────────────────────────── 6. 滑入工具类 ─────────────────────────────── */ @keyframes slideInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } .slide-in-up { opacity: 0; animation: slideInUp var(--duration-enter) var(--ease-decelerate) forwards; } .slide-in-down { opacity: 0; animation: slideInDown var(--duration-enter) var(--ease-decelerate) forwards; } .slide-in-left { opacity: 0; animation: slideInLeft var(--duration-enter) var(--ease-decelerate) forwards; } .slide-in-right { opacity: 0; animation: slideInRight var(--duration-enter) var(--ease-decelerate) forwards; } /* ─────────────────────────────── 7. 缩放弹出动画 ─────────────────────────────── */ @keyframes popIn { 0% { opacity: 0; transform: scale(0.8); } 70% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } .pop-in { opacity: 0; animation: popIn var(--duration-enter) var(--ease-bounce) forwards; } /* ─────────────────────────────── 8. 旋转动画 ─────────────────────────────── */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin { animation: spin 1s linear infinite; } .spin-slow { animation: spin 3s linear infinite; } /* ─────────────────────────────── 9. 抖动动画 — 错误/告警提示 ─────────────────────────────── */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } } .shake { animation: shake 0.4s var(--ease-standard); } /* ─────────────────────────────── 10. 闪烁动画 — 高亮提示 ─────────────────────────────── */ @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .flash { animation: flash 1s var(--ease-standard) 3; } /* ─────────────────────────────── 11. 滚动触发入场 — 配合 IntersectionObserver ─────────────────────────────── */ @keyframes scrollReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .scroll-reveal { opacity: 0; } .scroll-reveal.revealed { animation: scrollReveal 0.6s var(--ease-decelerate) forwards; } /* 滚动触发 stagger */ .scroll-reveal-stagger > * { opacity: 0; } .scroll-reveal-stagger.revealed > *:nth-child(1) { animation: scrollReveal 0.5s var(--ease-decelerate) 0ms forwards; } .scroll-reveal-stagger.revealed > *:nth-child(2) { animation: scrollReveal 0.5s var(--ease-decelerate) 60ms forwards; } .scroll-reveal-stagger.revealed > *:nth-child(3) { animation: scrollReveal 0.5s var(--ease-decelerate) 120ms forwards; } .scroll-reveal-stagger.revealed > *:nth-child(4) { animation: scrollReveal 0.5s var(--ease-decelerate) 180ms forwards; } .scroll-reveal-stagger.revealed > *:nth-child(5) { animation: scrollReveal 0.5s var(--ease-decelerate) 240ms forwards; } .scroll-reveal-stagger.revealed > *:nth-child(6) { animation: scrollReveal 0.5s var(--ease-decelerate) 300ms forwards; } .scroll-reveal-stagger.revealed > *:nth-child(7) { animation: scrollReveal 0.5s var(--ease-decelerate) 360ms forwards; } .scroll-reveal-stagger.revealed > *:nth-child(8) { animation: scrollReveal 0.5s var(--ease-decelerate) 420ms forwards; } /* ─────────────────────────────── 12. 打字机光标闪烁 ─────────────────────────────── */ @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .typing-cursor::after { content: '|'; color: var(--green, #2d8a5e); animation: cursorBlink 0.8s step-end infinite; margin-left: 2px; } /* ─────────────────────────────── 13. 页面加载完成后的整体淡入 ─────────────────────────────── */ @keyframes pageLoaded { from { opacity: 0; } to { opacity: 1; } } .page-loaded { animation: pageLoaded 0.4s var(--ease-standard) forwards; }