// Dropdown menu animation
@keyframes dropdownAnimation {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0px, 0);
  }
}

@-webkit-keyframes dropdownAnimation {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0px, 0);
  }
}

.dropdownAnimation {
  animation-fill-mode: both;
  animation-duration: 0.25s;
  animation-name: dropdownAnimation;
}

// Fadeout animation
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}

// FadeInUp animation
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

// Bounce delay animation
@keyframes bounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@-webkit-keyframes bounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0)
  }
  40% {
    -webkit-transform: scale(1.0)
  }
}

// Progress bar animation
@keyframes animateProgressBar {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}

@-webkit-keyframes animateProgressBar {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0);}
}

// Ripple animation
@keyframes ripple {
  0% {
    opacity: 1;
    transform: scale(0);
  }

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

@-webkit-keyframes ripple {
  0% {
    opacity: 1;
    transform: scale(0);
  }

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

// Ripple animation for radio
@keyframes ripple-radio {
  0% {
    transform: scale(0);
  }

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

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

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

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

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

.spin-animation {
  animation-name: spin;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
