@keyframes button-enter {
  from { opacity: 0; top: 2em; }
  70% { top: -.3em; }
  100% { opacity: 1; top: 0; }
}

@keyframes bounce-button {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

@keyframes fading {
  from { opacity: 0; }
  100% { opacity: 1; }
}

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

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

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

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

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

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

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

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

@keyframes fade-from-back {
  from {
    opacity: 0;
    transform: scale3d(.5, .5, .5);
  }

  100% { opacity: 1; }
}

@keyframes fade-from-front {
  from {
    opacity: 0;
    transform: scale3d(1.5, 1.5, 1.5);
  }

  100% { opacity: 1; }
}

@keyframes load {
  0%, 80%, 100% {
    box-shadow: 0 0, 0 0;
    height: 4em;
  }

  40% {
    box-shadow: 0 -1.75em, 0 1.75em;
    height: 4em;
  }
}
