[data-animate] {
    opacity: 0;
    transition: 350ms;
}

[data-animate="left"] {
    transform: translate3d(-50px, 0, 0);
}

[data-animate="right"] {
    transform: translate3d(50px, 0, 0);
}

[data-animate].animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@keyframes slideLeft {
    from {
      opacity: 0;
      transform: translate3d(-50px, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes slideRight {
    from {
      opacity: 0;
      transform: translate3d(50px, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes slideTop {
    from {
      opacity: 0;
      transform: translate3d(0, -50px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes slideBottom {
    from {
      opacity: 0;
      transform: translate3d(0, 50px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .animateLeft {
    animation: slideLeft 250ms ease-in-out;
  }
  
  .animateRight {
    animation: slideRight 250ms ease-in-out;
  }
  
  .animateTop {
    animation: slideTop 250ms ease-in-out;
  }
  
  .animateBottom {
    animation: slideBottom 250ms ease-in-out;
  }