@keyframes upDown {
  0% {
    transform: translateY(0px)
  }
  50% {
    transform: translateY(30px)
  }
  100% {
    transform: translateY(0px)
  }
}


@keyframes downUp {
  0% {
    transform: translateY(0px)
  }
  50% {
    transform: translateY(-30px)
  }
  100% {
    transform: translateY(0px)
  }
}




@keyframes beforeScale {
  0% {
    transform: scale(1)
  }
  50% {
     transform: scale(1.2)
  }
  100% {
    transform: scale(1)
  }
}



@keyframes fadeInOut {
    0% {
      filter: blur(10px);
    }
    50% {
     filter: blur(30px);
    }
    100% {
     filter: blur(0px);
    }
  }
  

@keyframes movingcircle {
    0%,
    7% {
    
      transform: translateX(20%);
      transform: translateY(10%);
    
      
    }
    15% {
      
      transform: translateX(30%);
      transform: translateY(20%);
    }
    20% {
      
       transform: translateX(60%);
      transform: translateY(50%);
    }
    25% {
      
       transform: translateX(40%);
      transform: translateY(20%);
    }
    30% {
      
       transform: translateX(10%);
      transform: translateY(30%);
    }
    35% {
      
       transform: translateX(10%);
      transform: translateY(-30%);
    }
    40%,
    100% {
      transform: translateX(40%);
      transform: translateY(10%);
    }
  }
  


@keyframes wiggle {
  0%,
  7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-3deg);
  }
  20% {
    transform: rotateZ(1deg);
  }
  25% {
    transform: rotateZ(-1deg);
  }
  30% {
    transform: rotateZ(.31deg);
  }
  35% {
    transform: rotateZ(-.31deg);
  }
  40%,
  100% {
    transform: rotateZ(0);
  }
}

@keyframes reverse-wiggle {
  0%,
  7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(1deg); /* Reverse the rotation */
  }
  20% {
    transform: rotateZ(-1deg); /* Reverse the rotation */
  }
  25% {
    transform: rotateZ(1deg); /* Reverse the rotation */
  }
  30% {
    transform: rotateZ(-.31deg); /* Reverse the rotation */
  }
  35% {
    transform: rotateZ(.31deg); /* Reverse the rotation */
  }
  40%,
  100% {
    transform: rotateZ(0);
  }
}

@keyframes smoothScale {
  0% {
    transform: rotate(2deg);
    scale: 1;
  }
  50% {
    transform: rotate(0deg);
    scale: 1.04;
  }
  100% {
    transform: rotate(-2deg);
    scale: 1;
  }
}


@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


@keyframes Tada {
  0% {
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

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

  14% {
    transform: scale(1.3);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.3);
  }

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

@keyframes bounce {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-15px);
    }
  }

@keyframes halfRotate  {
  0%{
      transform: rotate(0deg);
    }
  25%{
      transform: rotate(22deg);
  }
  50%{
      transform: rotate(0deg);
  }  
  75%{
      transform: rotate(-22deg);
  }  
  100%{
      transform: rotate(0deg);
  }
}

@keyframes halfRotateReverse  {
  0%{
      transform: rotate(0deg);
    }
  25%{
      transform: rotate(-22deg);
  }
  50%{
      transform: rotate(0deg);
  }  
  75%{
      transform: rotate(22deg);
  }  
  100%{
      transform: rotate(0deg);
  }
}

@keyframes horizontalMove {
  0% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(-50px);
  }
}

@keyframes verticallMove {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(-50px);
  }
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(0.9);
  }
  21% {
    transform: scale(1.1) skew(0.004turn)
  }
  28% {
    transform: scale(1) skew(0.008turn);
  }
  35% {
    transform: scale(1) skew(0)
  }
}


@keyframes echo {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  14% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  21% {
    opacity: 0.4;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

@keyframes flipX {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0);
  }
}

@keyframes flipY{
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(0);
  }
}


@keyframes grayBlurFilter {
  0% {
    filter: grayscale(0%) blur(0px);
  }
  50% {
    filter: grayscale(100%) blur(5px);
  }
  100% {
    filter: grayscale(0%) blur(0px);
  }
}

@keyframes rotateFromBottom {
  0% {
    transform-origin: bottom center;
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform-origin: bottom center;
    transform: rotate(180deg);
  }
}

@keyframes pound {
	from { transform: none; }
	50% { transform: scale(1.4); }
	to { transform: none; }
}

@keyframes GlowWhite {
	from { filter: drop-shadow(0 0 0px #fff); }
	50% { filter: drop-shadow(0 0 5px #fff); }
	to { filter: drop-shadow(0 0 0px #fff) }
}

@keyframes GlowGreen {
	from { filter: drop-shadow(0 0 0px #00ff00); }
	50% { filter: drop-shadow(0 0 5px #00ff00); }
	to { filter: drop-shadow(0 0 0px #00ff00) }
}
/* Text */

@keyframes typing {
    from {
      width: 0rem;
    }
  }
      
  @keyframes blink {
    50% {
      border-color: transparent
    }
  }
  



@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1177,
      0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 100px #ff1177, 0 0 150px #ff1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff1177,
      0 0 35px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 75px #ff1177;
  }
}

@keyframes glow {
  0% {
    text-shadow: 0 0 5px #fff, 0 0 10px #0ff, 0 0 20px #0ff;
  }
  100% {
    text-shadow: 0 0 10px #fff, 0 0 20px #0ff, 0 0 30px #0ff;
  }
}


@keyframes letterSpacing {
  70%, 100% {letter-spacing: 10px;} 
}

@keyframes bounceText {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.5;
  }
}

@keyframes colorWave {
  0%   { color: #e91e63; }
  25%  { color: #3f51b5; }
  50%  { color: #4caf50; }
  75%  { color: #ff9800; }
  100% { color: #e91e63; }
}

@keyframes shadow-dance {
    0%, 100% {
        text-shadow: 5px 5px 0 #ff005e, 10px 10px 0 #00d4ff;
    }
    50% {
        text-shadow: -5px -5px 0 #00d4ff, -10px -10px 0 #ff005e;
    }
}

/* Button */

@keyframes btnPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes btnBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes btnShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }

}

@keyframes btnBorderGlow {
  0%, 100% {
    box-shadow: 0 0 1px #ffffff, 0 0 5px #ffffff, 0 0 10px #ffffff;
  }
  50% {
    box-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff;
  }
}

@keyframes btncolorInvert {
  0% {
    background-color:#000;
    color:#fff;
  }
  50% {
    background-color:#fff;
    color:#000;
  }
  100% {
    background-color:#000;
    color:#fff;
  }
}
@keyframes btnBorderRadius {
  0% {
    border-radius: 0 20px 0 20px;
  }
  50% {
    border-radius: 20px 0 20px 0;
  }
  100% {
    border-radius: 0 20px 0 20px;
  }
}

@keyframes btnBorderShadow {
  0%, 100% {
    box-shadow: 0 0 1px 2px #ffffff;
  }
  50% {
    box-shadow: 0 0 1px 2px #ffffff36, 0 0 1px 10px #ffffff21;
  }
}
@keyframes btnBorderShadowInset {
  0%, 100% {
    box-shadow: inset 0 0 0 0 #ffffff87;
  }
  50% {
    box-shadow: inset 0 0 5px 2px #ffffff87;
  }
}

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

  14% {
    transform: scale(1.3);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.3);
  }

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