/* NOTE: as a inspiration from: http://www.hongkiat.com/blog/css-text-effects/ */
@-webkit-keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes change {
  0%, 12%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  17%,29% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
  34%,46% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  51%,63% {
    -webkit-transform: translateY(-75%);
            transform: translateY(-75%);
  }
  68%,80% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  85%,97% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
}
@keyframes change {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  17%, 25% {
    -webkit-transform: translateY(-16.6%);
            transform: translateY(-16.6%);
  }
  34%, 39% {
    -webkit-transform: translateY(-34%);
            transform: translateY(-34%);
  }
  51% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  68%,75% {
    -webkit-transform: translateY(-66%);
            transform: translateY(-66%);
  }
  85%, 97% {
    -webkit-transform: translateY(-83.2%);
            transform: translateY(-83.2%);
  }
}