:root {
    --anim-linkeasing: cubic-bezier(0.165, 0.84, 0.44, 1);
    --transition: all .3s var(--anim-linkeasing);
}
.transition { transition: var(--transition); }


.rotate { animation: rotate 1s linear infinite; }
.fadeInDown, .fadeInUp, .fadeOutUp, .fadeOutDown, .fadeInLeft, .fadeInRight, .zoomInFadeIn, .zoomOutBigFadeOut {
    animation-fill-mode: both;
    animation-duration: 0.7s;
    animation-name: fadeInDown;
}
    .fadeInUp { animation-name: fadeInUp; }
    .fadeInLeft { animation-name: fadeInLeft; }
    .fadeInRight { animation-name: fadeInRight; }
    .fadeOutUp { animation-name: fadeOutUp; }
    .fadeOutDown { animation-name: fadeOutDown; }
    .zoomInFadeIn { animation-name: zoomInFadeIn; }
    .zoomOutBigFadeOut { animation-name: zoomOutBigFadeOut; }
@keyframes rotate { to { transform: rotate(359deg); } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-1.25rem); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp {0% { opacity: 0; transform: translateY(1.25rem); }70% { opacity: 1; }100% { transform: translateY(0); }}
@keyframes fadeInRight {0% { opacity: 0; transform: translateX(1.25rem); }70% { opacity: 1; }100% { transform: translateX(0); }}
@keyframes fadeInLeft {0% { opacity: 0; transform: translateX(-1.25rem); }70% { opacity: 1; }100% { transform: translateX(0); }}
@keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-1.25rem); } }
@keyframes fadeOutDown {0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(1.25rem); }}
@keyframes zoomInFadeIn { 0% { opacity: 0; transform: scale(0.5);} 100% {opacity: 1; transform: scale(1);} }
@keyframes zoomOutBigFadeOut { 0% {opacity: 1; transform: scale(1);} 100% { opacity: 0; transform: scale(1.5);}  }