.fade-right, .fade-left, .fade-up, .fade-down,
.flip-right, .flip-left, .flip-up, .flip-down,
.zoom-in-up, .zoom-in-down, .zoom-in, .zoom-out {
    position: relative; opacity: 0; transition: 0.4s ease-in-out all; }
.fade-left { transform: translateX(-100px); }
.fade-right { transform: translateX(100px); }
.fade-up { transform: translateY(-100px); }
.fade-down { transform: translateY(100px); }

.flip-right { transform: rotateY(-90deg); }
.flip-left { transform: rotateY(90deg); }
.flip-up { transform: rotateX(-90deg); }
.flip-down { transform: rotateX(90deg); }

.zoom-in { transform: scale(0.5); }
.zoom-out { transform: scale(1.25); }

.zoom-in-up { transform-origin: bottom; transform: translateY(-200px) scale(0.5); }
.zoom-in-down { transform-origin: bottom; transform: translateY(200px) scale(0.5); }

.fade-right.visible, .fade-left.visible, .fade-up.visible, .fade-down.visible { transform: translateX(0); opacity: 1; }
.flip-right.visible, .flip-left.visible, .flip-up.visible, .flip-down.visible { transform: rotate(0deg); opacity: 1; }
.zoom-in.visible, .zoom-out.visible { transform: scale(1); opacity: 1; }
.zoom-in-up.visible, .zoom-in-down.visible { transform: translateY(0) scale(1); opacity: 1; }

.offset-1 { transition-delay: 0.1s; }
.offset-2 { transition-delay: 0.2s; }
.offset-3 { transition-delay: 0.3s; }
.offset-4 { transition-delay: 0.4s; }
.offset-5 { transition-delay: 0.5s; }
.offset-6 { transition-delay: 0.6s; }
.offset-7 { transition-delay: 0.7s; }
.offset-8 { transition-delay: 0.8s; }
.offset-9 { transition-delay: 0.9s; }
.offset-10 { transition-delay: 1s; }