.animate {
transition: all 2s ease-out; 
display: inline-block; 
}

/* Move In */
.move-in-left {
    opacity: 0;
    transform: translateX(-100%);
	 transition: opacity 2s ease-out, transform 1s ease-out;
}
.move-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.move-in-right {
    opacity: 0;
    transform: translateX(100%);
	 transition: opacity 2s ease-out, transform 1s ease-out;
         }
.move-in-right.animate {
    opacity: 1;
    transform: translateX(0);
}


.move-in-top {
    opacity: 0;
    transform: translateY(-100%);
	 transition: opacity 2s ease-out, transform 2s ease-out;
         }
.move-in-top.animate {
    opacity: 1;
    transform: translateX(0);
}



.move-in-bottom {
    opacity: 0;
    transform: translateY(100%);
	 transition: opacity 2s ease-out, transform 2s ease-out;
          }
.move-in-bottom.animate {
    opacity: 1;
    transform: translateX(0);
}
/* Scale */
.scale {
    opacity: 0;
    transform: scale(0);
}
.scale.animate {
    opacity: 1;
    transform: scale(1);
}

/* Rotate */
.rotate {
    opacity: 0;
    transform: rotate(0deg);
}
.rotate.animate {
    opacity: 1;
    transform: rotate(360deg);
}

/* Fade */
.fade {
    opacity: 0;
}
.fade.animate {
    opacity: 1;
}

/* Slide */
.slide {
    opacity: 0;
    transform: translateX(-100%);
}
.slide.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Push */
.push {
    opacity: 0;
    transform: translateX(100%);
}
.push.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Overlay */
.overlay {
    opacity: 0;
    transform: translateX(100%);
}
.overlay.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Layer Blur */
.layer-blur {
    opacity: 0;
    backdrop-filter: blur(0px);
}
.layer-blur.animate {
    opacity: 1;
    backdrop-filter: blur(10px);
}

/* Background Blur */
.background-blur {
    opacity: 0;
    backdrop-filter: blur(0px);
}
.background-blur.animate {
    opacity: 1;
    backdrop-filter: blur(10px);
}