/* 블러 + 좌우로 펼쳐지면서 타이핑때 딜레이줘서 씀.*/
@-webkit-keyframes anim1 {
  0% {
    filter: blur(20px);
    opacity: 0;
    transform: scaleX(0.1);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    filter: blur(0px);
  }
}

@keyframes anim1 {
  0% {
    filter: blur(20px);
    opacity: 0;
    transform: scaleX(0.1);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
    filter: blur(0px);
  }
}

/* 하-상 */
@-webkit-keyframes anim2 {
  0% {
    filter: blur(20px);
    opacity: 0;
    bottom: -100px;
  }

  20% {
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    bottom: 0;
  }
}

@keyframes anim2 {
  0% {
    filter: blur(20px);
    opacity: 0;
    bottom: -100px;
  }

  20% {
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    bottom: 0;
  }
}

/* 좌->우 */
@-webkit-keyframes anim3 {
  0% {
    filter: blur(20px);
    opacity: 0;
    left: -100px;
  }

  20% {
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    left: 0;
  }
}

@keyframes anim3 {
  0% {
    filter: blur(20px);
    opacity: 0;
    left: -100px;
  }

  20% {
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    left: 0;
  }
}

@-webkit-keyframes anim4 {
  0% {
    filter: blur(20px);
    opacity: 0;
    right: -100px;
  }

  20% {
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    right: 0;
  }
}
/* 우->좌 */
@keyframes anim4 {
  0% {
    filter: blur(20px);
    opacity: 0;
    right: -100px;
  }

  20% {
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    right: 0;
  }
}

/* 후기바운스 */

@-webkit-keyframes anim5 {
  0% {
    transform: scale(0);
  }

  72% {
    transform: scale(1.1);
  }

  84% {
    transform: scale(0.9);
  }

  98% {
    transform: scale(1.04);
  }

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

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

  72% {
    transform: scale(1.1);
  }

  84% {
    transform: scale(0.9);
  }

  98% {
    transform: scale(1.04);
  }

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

/* 스케일? */
@-webkit-keyframes anim6 {
  10% {
    margin-bottom: 0%;
  }

  20% {
    margin-bottom: 1.4%;
  }

  30% {
    margin-bottom: 0%;
  }

  40% {
    margin-bottom: 1.4%;
  }

  50% {
    margin-bottom: 0%;
  }
}
@keyframes anim6 {
  10% {
    margin-bottom: 0%;
  }

  20% {
    margin-bottom: 1.4%;
  }

  30% {
    margin-bottom: 0%;
  }

  40% {
    margin-bottom: 1.4%;
  }

  50% {
    margin-bottom: 0%;
  }
}

@-webkit-keyframes spin {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(180deg);
    opacity: 0.7;
  }

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

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(180deg);
    opacity: 0.7;
  }

  100% {
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes floating {
  0% {
    /* anim5의 최종 상태(scale(1))를 유지하면서 이동 */
    transform: scale(1) translateY(0px);
  }

  50% {
    transform: scale(1) translateY(15px);
  }

  100% {
    /* anim5의 최종 상태(scale(1))를 유지하면서 이동 */
    transform: scale(1) translateY(0px);
  }
}
@keyframes floating {
  0% {
    /* anim5의 최종 상태(scale(1))를 유지하면서 이동 */
    transform: scale(1) translateY(0px);
  }

  50% {
    transform: scale(1) translateY(10px);
  }

  100% {
    /* anim5의 최종 상태(scale(1))를 유지하면서 이동 */
    transform: scale(1) translateY(0px);
  }
}