/*
 * @Author: 谭洁莹
 * @Date: 2025-09-25 09:04:57
 * @LastEditTime: 2025-11-11 13:42:33
 * @FilePath: /template/default/styles/animation.css
 * @Description: 动画效果
 */

/* 加载动画 */
@keyframes loadingMove {
  50% {
    width: 100%;
  }
  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}
/* 多重抖动 */
@keyframes ShakeImage {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(8deg);
  }
  60% {
    transform: rotate(-4deg);
  }
  80% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* 抖动 */
@keyframes ShakeImage2 {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(8deg);
  }
  66% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* 放大抖动 */
@keyframes ShakeScale {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  25% {
    transform: scale(1.2) rotate(10deg);
  }
  30% {
    transform: scale(1.2) rotate(-10deg);
  }
  35% {
    transform: scale(1.2) rotate(10deg);
  }
  40% {
    transform: scale(1.2) rotate(-10deg);
  }
  60% {
    transform: scale(1);
  }
  to {
    transform: scale(1);
  }
}
@keyframes UpDownFloat {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: -4px;
  }
  50% {
    margin-top: 0;
  }
  75% {
    margin-top: 4px;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes FadeElement {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
/* 文字变大变小 */
@keyframes SizeRandom {
  0% {
    transform: scale(var(--min-scale));
  }
  100% {
    transform: scale(var(--max-scale));
  }
}
/* 文字左右漂移 */
@keyframes FloatText {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(var(--move));
  }
}
/* 文字出现消失 */
@keyframes BubbleFloat {
  0% {
    opacity: 0;
    transform: translateY(30px); /* 从下淡入 */
  }
  15% {
    opacity: 1;
    transform: translateY(0); /* 完全出现，归位 */
  }
  85% {
    opacity: 1;
    transform: translateY(-20px); /* 轻微上移，模拟冒泡 */
  }
  100% {
    opacity: 0;
    transform: translateY(-50px); /* 上方淡出消失 */
  }
}
.animate-ShakeImage {
  animation: ShakeImage 0.5s infinite;
}
.animate-UpDownFloat {
  animation: UpDownFloat 0.8s infinite;
}
@media screen and (min-width: 1024px) {
  .animate-FloatText {
    animation: FloatText 5s ease-in-out infinite;
  }
}