.animated { animation-duration: 1s; animation-fill-mode: both; visibility: hidden }
@keyframes animate-slide-in-down { from { opacity: 0; transform: translate3d(0, -100%, 0); visibility: visible } to { opacity: 1; transform: translate3d(0, 0, 0) } }
.animate-slide-in-down { animation-name: animate-slide-in-down; visibility: visible !important }
@keyframes animate-slide-in-left { from { opacity: 0; transform: translate3d(-100%, 0, 0); visibility: visible } to { opacity: 1; transform: translate3d(0, 0, 0) } }
.animate-slide-in-left { animation-name: animate-slide-in-left; visibility: visible !important }
@keyframes animate-slide-in-right { from { opacity: 0; transform: translate3d(100%, 0, 0); visibility: visible } to { opacity: 1; transform: translate3d(0, 0, 0) } }
.animate-slide-in-right { animation-name: animate-slide-in-right; visibility: visible !important }
@keyframes animate-slide-in-up { from { opacity: 0; transform: translate3d(0, 100%, 0); visibility: visible } to { opacity: 1; transform: translate3d(0, 0, 0) } }
.animate-slide-in-up { animation-name: animate-slide-in-up; visibility: visible !important }