/* +++++++++++++++++++++++++++++++ *\
        ANIMATION MOT PAR MOT
\* +++++++++++++++++++++++++++++++ */
.js-animation span {
  display: inline-block;
  overflow: hidden;
}
.js-animation span span {
  display: block;
  animation: titleReveal .7s both;
}

/* +++++++++++++++++++++++++++++++ *\
              KEYFRAMES
\* +++++++++++++++++++++++++++++++ */
@keyframes titleReveal {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes slideFromTop {
  from { transform: translateY(-50px); }
  to { transform: translateY(0px); }
}
@keyframes slideToBottom {
  from { transform: translateY(0px); }
  to { transform: translateY(50px); }
}


@keyframes animate {
  10% {
      transform: scale(1, 0.002);
  }
  50% {
      transform: scale(0.2, 0.002);
      opacity: 1;
  }
  100% {
      transform: scale(1, 1);
  }
}

@keyframes shake-button {
  0%, 16%, 100% {
      transform: translateZ(0);
  }
  1.6%, 4.8%, 8%, 11.2%, 14.4% {
      transform: translate3d(-2px, 0, 0);
  }
  3.2%, 6.4%, 9.6%, 12.8% {
      transform: translate3d(2px, 0, 0);
  }
}