body:not(.no-js) [data-animation] {
    opacity: 0;
    transition-timing-function: ease-out;
}

body:not(.no-js) [data-animation].animate {
    opacity: 1;
    transition: opacity 1000ms, transform 750ms;
}

body:not(.no-js) [data-animation="bottom"] {
    transform: translateY(50px);
}

body:not(.no-js) [data-animation="bottom"].animate {
    transform: translateY(0px);
}

body:not(.no-js) [data-animation="top"] {
    transform: translateY(-50px);
}

body:not(.no-js) [data-animation="top"].animate {
    transform: translateY(0px);
}

body:not(.no-js) [data-animation="left"] {
    transform: translateX(-50px);
}

body:not(.no-js) [data-animation="left"].animate {
    transform: translateX(0px);
}

body:not(.no-js) [data-animation="right"] {
    transform: translateX(50px);
}

body:not(.no-js) [data-animation="right"].animate {
    transform: translateX(0px);
}

body:not(.no-js) [data-animation="scale"] {
    transform: scale(0);
}

body:not(.no-js) [data-animation="scale"].animate {
    transform: scale(1);
}

body:not(.no-js) [data-animation].animate.animation-over {
    transition-duration: initial;
}