@keyframes slide {
  0% {
    bottom: 0;
    opacity: 1;
  }
  99% {
    bottom: 100%;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}
@-webkit-keyframes slide {
  0% {
    bottom: 0;
    opacity: 1;
  }
  99% {
    bottom: 100%;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes rotateLeftRight {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

@keyframes moveUpDown {
  0% {
    transform: translateY(-25px);
  }
  100% {
    transform: translateY(25px);
  }
}
@keyframes moveUpDownRotate {
  0% {
    transform: translateY(-25px) rotate(-20deg);
  }
  100% {
    transform: translateY(25px) rotate(20deg);
  }
}

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

@keyframes fill-in {
  to {
    opacity: 1;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sway {
  0% {
    transform: translateX(-10px);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes loaderspin {
  0% {
    @include transform(rotate(0deg) scale(0.8));
  }

  50% {
    border: 1px solid $color-primary;
    @include transform(rotate(360deg) scale(1));
  }

  100% {
    @include transform(rotate(720deg) scale(0.8));
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 $color-primary;
  }

  50% {
    box-shadow: 0 0 0 $color-primary;
    margin-bottom: 0;
    @include transform(translate(15px, 15px));
  }

  100% {
    box-shadow: 30px 0 0 $color-primary;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 $color-5;
  }

  50% {
    box-shadow: 0 0 0 $color-5;
    margin-top: -20px;
    @include transform(translate(15px, 15px));
  }

  100% {
    box-shadow: 30px 0 0 $color-5;
    margin-top: 0;
  }
}
