.animation-duration-fill(@time, @mode) {
  animation-duration: @time;
  animation-fill-mode: @mode;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
  -moz-animation-name: @name;
  -o-animation-name: @name;
  animation-name: @name;
}
.transition-timing-function(@val) {
  -webkit-transition-timing-function: @val;
  -moz-transition-timing-function: @val;
  -o-transition-timing-function: @val;
  transition-timing-function: @val;
}

.translatedContent {
  .animation-duration-fill(0.4s, both);
  .animation-name(fadeInBottom);
  .transition-timing-function(ease-in);
}
.translatedContent1 {
  .animation-duration-fill(0.4s, both);
  .animation-name(fadeInBottom1);
  .transition-timing-function(ease-in);
}
.translatedContent2 {
  .animation-duration-fill(0.4s, both);
  .animation-name(fadeInBottom2);
  .transition-timing-function(ease-in);
}
.translatedContent3 {
  .animation-duration-fill(0.4s, both);
  .animation-name(fadeInBottom3);
  .transition-timing-function(ease-in);
}
.translatedContent4 {
  .animation-duration-fill(0.4s, both);
  .animation-name(fadeInBottom4);
  .transition-timing-function(ease-in);
}

:global {
  @keyframes fadeInBottom {
    0% {
      opacity: 0;
      transform: translate3d(0%, 100%, 0);
    }
    40% {
      opacity: 0.2;
      transform: translate3d(0%, 10%, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fadeInBottom1 {
    0% {
      opacity: 0;
      transform: translate3d(0%, 90%, 0);
    }
    40% {
      opacity: 0.2;
      transform: translate3d(0%, 20%, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fadeInBottom2 {
    0% {
      opacity: 0;
      transform: translate3d(0%, 80%, 0);
    }
    40% {
      opacity: 0.2;
      transform: translate3d(0%, 30%, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fadeInBottom3 {
    0% {
      opacity: 0;
      transform: translate3d(0%, 70%, 0);
    }
    40% {
      opacity: 0.2;
      transform: translate3d(0%, 40%, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fadeInLeft4 {
    0% {
      opacity: 0;
      transform: translate3d(0%, 60%, 0);
    }
    40% {
      opacity: 0.2;
      transform: translate3d(0%, 50%, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }
}