fmode-app/ui-kit/src/styles.scss

/* ============================================================
 * 全局 SCSS 助手:动画关键帧 & 通用过渡工具类
 * 组件级复杂样式仍写在各自的 .scss 里(便于局部修改)。
 * ============================================================ */

// ---- 进入/退出动画关键帧 ----
@keyframes ui-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ui-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes ui-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ui-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ui-slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ui-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes ui-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes ui-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@keyframes ui-progress-indeterminate {
  0%   { left: -40%; width: 40%; }
  60%  { left: 60%;  width: 70%; }
  100% { left: 110%; width: 40%; }
}

// ---- 工具类(在模板里可直接用) ----
.animate-fade-in       { animation: ui-fade-in 0.18s ease-out both; }
.animate-fade-out      { animation: ui-fade-out 0.25s ease-in both; }
.animate-scale-in      { animation: ui-scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-slide-up      { animation: ui-slide-up 0.2s ease-out both; }
.animate-slide-down    { animation: ui-slide-down 0.2s ease-out both; }
.animate-slide-in-right{ animation: ui-slide-in-right 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-slide-in-left { animation: ui-slide-in-left 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-shimmer       { animation: ui-shimmer 1.6s linear infinite; }

// ---- 无障碍:尊重“减少动态效果”偏好 ----
@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;
  }
}