@keyframes rock {
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,
  100% {
    transform: rotate(0);
  }
}

.animation-rock {
  animation: rock 2.5s linear infinite;
  transform-origin: top center;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.animation-rotation {
  animation: rotation 1s linear infinite reverse;
}

@keyframes rotation-180 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

.animation-rotation-180 {
  animation: rotation 1s linear;
}

.animation-breathing {
  animation: breathing 2s ease-out infinite;
}

@keyframes breathing {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(102%);
  }
  100% {
    transform: scale(1);
  }
}

/* 边框呼吸效果  breathing light*/
.animation-bln {
  animation: bln var(--bln-delay) ease-out infinite alternate;
}

@keyframes bln {
  50% {
    box-shadow: 0 0 30px var(--bln-color, currentColor) inset;
  }
}

/* 背景闪烁效果  breathing light*/
.animation-bg {
  animation: bg 1s ease-out infinite alternate;
}

@keyframes bg {
  50% {
    background-color: var(--bg-color, var(--color-fire));
  }
}

.animation-shake {
  animation: shake 2s linear infinite;
}

@keyframes shake {
  16.7% {
    transform: rotate(-30deg);
  }

  50% {
    transform: rotate(30deg);
  }

  75% {
    transform: rotate(-25deg);
  }

  91.7% {
    transform: rotate(12.5deg);
  }

  to {
    transform: rotate(-5deg);
  }
}

.animation-glitter {
  animation: glitter 2s linear infinite;
}

@keyframes glitter {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
.animation-glitter-special {
  animation: glitter-special 2s linear infinite;
}

@keyframes glitter-special {
  0% {
    background: linear-gradient(
      0deg,
      var(--text-color-gradient-normal-shallow) 0%,
      var(--text-color-gradient-normal-deep) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  50% {
    opacity: 0;
  }
  100% {
    background: linear-gradient(
      0deg,
      var(--text-color-gradient-normal-shallow) 0%,
      var(--text-color-gradient-normal-deep) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.strobe {
  animation: strobe 1400ms infinite;
  animation-timing-function: step-end;
}

@keyframes strobe {
  50% {
    opacity: 0.4;
  }
}

.nenon-flicker {
  animation: nenon-flicker 2.4s infinite;
}

@keyframes nenon-flicker {
  0%,
  19%,
  21%,
  23%,
  80%,
  100% {
    opacity: 1;
  }

  20%,
  22%,
  82%,
  84% {
    opacity: 0.4;
  }
}

/* 扫描线  */
.scan-line::after {
  --scan-line-color: var(--el-color-primary);

  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--scan-line-color), transparent);
  box-shadow: 0 0 10px var(--scan-line-color);
  animation: scan-line 4.5s linear infinite;
}

.scan-line:hover::after {
  animation: none;
}

@keyframes scan-line {
  0% {
    top: -4px;
  }
  100% {
    top: 102%;
  }
}