[data-animate] {
  opacity: 0;
  transition: 0.75s ease-in-out;
  -webkit-transition: 0.75s ease-in-out;
  -moz-transition: 0.75s ease-in-out;
  -ms-transition: 0.75s ease-in-out;
  -o-transition: 0.75s ease-in-out;
}

[data-animate="top"] {
  transform: translateY(-30px);
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
}

[data-animate="bottom"] {
  transform: translateY(30px);
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
}

[data-animate="left"] {
  transform: translateX(-30px);
  -webkit-transform: translateX(-30px);
  -moz-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  -o-transform: translateX(-30px);
}

[data-animate="right"] {
  transform: translateX(30px);
  -webkit-transform: translateX(30px);
  -moz-transform: translateX(30px);
  -ms-transform: translateX(30px);
  -o-transform: translateX(30px);
}

[data-animate].animated {
  transform: translate(0);
  -webkit-transform: translate(0);
  -moz-transform: translate(0);
  -ms-transform: translate(0);
  -o-transform: translate(0);
  opacity: 1;
}