.animation {
--animation-transition-duration: 1s;
--animation-transition-easing: cubic-bezier( 0.76, 0, 0.24, 1 );
--animation-transition-delay: 0s;
}  .a--move-in {
--animation-distance: 33%;
position: relative;
overflow: hidden;
}
.a--move-in > .a-inner {
-webkit-transform: translateY( var( --animation-distance ) );
-moz-transform: translateY( var( --animation-distance ) );
transform: translateY( var( --animation-distance ) );
transition: all var( --animation-transition-duration ) var( --animation-transition-easing ) var( --animation-transition-delay ), font-size 0s;
opacity: 0;
}
.a--move-in[data-trigger*="hover"]:hover > .a-inner,
.a--move-in[data-trigger*="hover"]:active > .a-inner,
.a--move-in.do-animate > .a-inner,
:not( [class*="animation"] ).do-animate .a--move-in > .a-inner {
-webkit-transform: translateY( 0 );
-moz-transform: translateY( 0 );
transform: translateY( 0 );
opacity: 1;
} .a--move-out {
--animation-distance: -33%;
position: relative;
overflow: hidden;
}
.a--move-out > .a-inner {
transition: all var( --animation-transition-duration ) var( --animation-transition-easing ) var( --animation-transition-delay ), font-size 0s;
}
.a--move-out[data-trigger*="hover"]:hover > .a-inner,
.a--move-out[data-trigger*="hover"]:active > .a-inner,
.a--move-out.do-animate > .a-inner,
:not( [class*="animation"] ).do-animate .a--move-out > .a-inner {
-webkit-transform: translateY( var( --animation-distance ) );
-moz-transform: translateY( var( --animation-distance ) );
transform: translateY( var( --animation-distance ) );
} @media ( min-width: 700px ) { .a--scale-2x {
position: relative;
overflow: visible;
}
.a--scale-2x > .a-inner {
width: 100%;
transition: all var( --animation-transition-duration ) var( --animation-transition-easing ) var( --animation-transition-delay ), font-size 0s;
}
.a--scale-2x[data-trigger*="hover"]:hover > .a-inner,
.a--scale-2x[data-trigger*="hover"]:active > .a-inner,
.a--scale-2x.do-animate > .a-inner,
:not( [class*="animation"] ).do-animate .a--scale-2x > .a-inner {
width: 200%;
}
}