/* 
* keyframes.css 专用于定义动画 
*/

@keyframes vibrate-1 {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-10vh, 10vh);
  }

  40% {
    transform: translate(-10vh, -10vh);
  }

  60% {
    transform: translate(10vh, 10vh);
  }

  80% {
    transform: translate(10vh, -10vh);
  }

  100% {
    transform: translate(0);
  }
}

@keyframes rotate-in {
  0% {
    transform: rotate(-360deg);
    opacity: 0;
  }

  100% {
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes fade-in-fwd {
  0% {
    transform: translateZ(-80px);
    opacity: 0;
  }

  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}


@keyframes delay-show {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes rocket-show {
  0% {
    opacity: 0;
    transform: translateY(100vh);
  }

  100% {
    opacity: 100;
    transform: translateY(0vh);
  }
}

@keyframes pulsate-bck {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes light {
  0% {
    transform: scale(1.01);
  }

  50% {
    transform: scale(0.99);
  }

  100% {
    transform: scale(1.01);
  }
}

@keyframes button-glow {
  from {
    box-shadow: 
      inset 0px 0px 3px 2px rgba(128, 48, 150),
      0 0 5px 2px rgba(152, 117, 161, 0.4);
  }
  to {
    box-shadow: 
      inset 0px 0px 3px 2px rgba(128, 48, 150),
      0 0 20px 5px rgba(152, 117, 161, 0.8);
  }
}

@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes float {
  0% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.05);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}

/* 
  轨道星星转动动画
*/
@keyframes orbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes ping {
  0% {
    transform: scale(0.2);
    opacity: 0.8;
  }

  80% {
    transform: scale(1.2);
    opacity: 0;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes rotate-in-center {
  0% {
    transform: rotate(-360deg);
    opacity: 0;
  }

  100% {
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes slide-in-bck-center {
  0% {
    transform: translateZ(600px);
    opacity: 0;
  }

  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

/*
  详情页的切换动画  
*/

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

@keyframes blink {

  0%,
  100% {
    stroke-opacity: 1;
  }

  50% {
    stroke-opacity: 0.5;
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes rocket-line-draft {
  100% {
    stroke-dashoffset: 0;
  }
}