CSS animations

Example: animate on-scroll delay-200 duration-300 animation-fadeInUp

/* easings */
.ease-InSine { transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);}
.ease-OutSine { transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);}
.ease-InOutSine { transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);}
.ease-InQuad { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);}
.ease-OutQuad { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.ease-InOutQuad { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.ease-InCubic { transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}
.ease-OutCubic { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
.ease-InOutCubic { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
.ease-InQuart { transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);}
.ease-OutQuart { transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);}
.ease-InOutQuart { transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);}
.ease-InQuint { transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);}
.ease-OutQuint { transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);}
.ease-InOutQuint { transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);}
.ease-InExpo { transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);}
.ease-OutExpo { transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);}
.ease-InOutExpo { transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);}
.ease-InCirc { transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);}
.ease-OutCirc { transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);}
.ease-InOutCirc { transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);}
.ease-InBack { transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);}
.ease-OutBack { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.ease-InOutBack { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.ease-InOutFast { transition-timing-function: cubic-bezier(1,0,0,1);}
.ease-authenticMotion { transition-timing-function: cubic-bezier(.4,0,.2,1);}

animate animation-opacity delay-500 duration-2000

animate animation-zoomIn delay-500 duration-2000

animate animation-fadeInLeft delay-500 duration-2000

animate animation-fadeInRight delay-500 duration-2000

animate animation-fadeInUp delay-500 duration-2000

animate animation-fadeInDown delay-500 duration-2000

animate animation-rotation delay-500 duration-2000