haha/haha-mp/src/static/animations.css

/**
 * haha-mp 全局动画样式
 * 使用纯CSS动画类,避免SCSS mixins的导入问题
 */

/* ========== 淡入淡出 ========== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ========== 滑入效果 ========== */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(40rpx);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-40rpx);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========== 缩放效果 ========== */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* ========== 脉冲动画 ========== */
@keyframes pulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.3;
  }
  50% { 
    transform: scale(1.05);
    opacity: 0.5;
  }
}

/* ========== 呼吸动画 ========== */
@keyframes breathe {
  0%, 100% { 
    transform: scale(1);
  }
  50% { 
    transform: scale(1.02);
  }
}

/* ========== 骨架屏闪烁 ========== */
@keyframes skeleton {
  0%, 100% { 
    background-color: #F5F5F5; 
  }
  50% { 
    background-color: #EEEEEE; 
  }
}

/* ========== 旋转加载 ========== */
@keyframes spin {
  to { 
    transform: rotate(360deg); 
  }
}

/* ========== 抖动效果 ========== */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8rpx); }
  20%, 40%, 60%, 80% { transform: translateX(8rpx); }
}

/* ========== 弹跳效果 ========== */
@keyframes bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========== 通用动画类 ========== */
.animate-fade-in {
  animation: fadeIn 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.animate-fade-out {
  animation: fadeOut 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.animate-slide-up {
  animation: slideUp 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.animate-slide-down {
  animation: slideDown 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.animate-slide-left {
  animation: slideLeft 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.animate-slide-right {
  animation: slideRight 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.animate-scale-in {
  animation: scaleIn 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animate-scale-out {
  animation: scaleOut 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.animate-breathe {
  animation: breathe 3s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.animate-skeleton {
  animation: skeleton 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.animate-spin {
  animation: spin 0.8s linear infinite;
}

.animate-shake {
  animation: shake 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

.animate-bounce {
  animation: bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========== 延迟动画类 ========== */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ========== GPU加速 ========== */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform, opacity;
}