.fx{ visibility: hidden; }
.fx.fx-on{ visibility: visible; }
html.fx-off .fx{ visibility: visible; }
.fx.fx-u.fx-on{ animation: fx-u 1s ease both; }
.fx.fx-d.fx-on{ animation: fx-d 1s ease both; }
.fx.fx-l.fx-on{ animation: fx-l 1s ease both; }
.fx.fx-bl.fx-on{ animation: fx-bl 1s both; }
.fx.fx-br.fx-on{ animation: fx-br 1s both; }
.fx.fx-bu.fx-on{ animation: fx-bu 1s both; }
@keyframes fx-u{
    0%{ visibility: visible; transform: translate3d(0, 100%, 0); }
    to{ transform: translate3d(0, 0, 0); }
}
@keyframes fx-d{
    0%{ visibility: visible; transform: translate3d(0, -100%, 0); }
    to{ transform: translate3d(0, 0, 0); }
}
@keyframes fx-l{
    0%{ visibility: visible; transform: translate3d(-100%, 0, 0); }
    to{ transform: translate3d(0, 0, 0); }
}
@keyframes fx-bl{
    0%, 60%, 75%, 90%, to{ animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
    0%{ opacity: 0; transform: translate3d(-3000px, 0, 0); }
    60%{ opacity: 1; transform: translate3d(25px, 0, 0); }
    75%{ transform: translate3d(-10px, 0, 0); }
    90%{ transform: translate3d(5px, 0, 0); }
    to{ transform: translate3d(0, 0, 0); }
}
@keyframes fx-br{
    0%, 60%, 75%, 90%, to{ animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
    0%{ opacity: 0; transform: translate3d(3000px, 0, 0); }
    60%{ opacity: 1; transform: translate3d(-25px, 0, 0); }
    75%{ transform: translate3d(10px, 0, 0); }
    90%{ transform: translate3d(-5px, 0, 0); }
    to{ transform: translate3d(0, 0, 0); }
}
@keyframes fx-bu{
    0%, 60%, 75%, 90%, to{ animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
    0%{ opacity: 0; transform: translate3d(0, 3000px, 0); }
    60%{ opacity: 1; transform: translate3d(0, -20px, 0); }
    75%{ transform: translate3d(0, 10px, 0); }
    90%{ transform: translate3d(0, -5px, 0); }
    to{ transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce){
    .fx{ visibility: visible; }
    .fx.fx-on{ animation: none; }
}