:root {
    --x-floating-distance: -20px;
    --x-floating-delay: 0ms;
    --x-floating-duration: 6000ms;
}

[data-x-floating] {
    animation-duration: var(--x-floating-duration);
    animation-delay: var(--x-floating-delay);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-name: x-float-vertical;
}

[data-x-floating="horizontal"] {
    animation-name: x-float-horizontal;
}

@keyframes x-float-vertical {
    0% {
        transform: translatey(0);
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -ms-transform: translatey(0);
        -o-transform: translatey(0);
    }
    50% {
        transform: translatey(var(--x-floating-distance));
        -webkit-transform: translatey(var(--x-floating-distance));
        -moz-transform: translatey(var(--x-floating-distance));
        -ms-transform: translatey(var(--x-floating-distance));
        -o-transform: translatey(var(--x-floating-distance));
    }
    100% {
        transform: translatey(0);
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -ms-transform: translatey(0);
        -o-transform: translatey(0);
    }
}

@keyframes x-float-horizontal {
    0% {
        transform: translatex(0);
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -ms-transform: translatex(0);
        -o-transform: translatex(0);
    }
    50% {
        transform: translatex(var(--x-floating-distance));
        -webkit-transform: translatex(var(--x-floating-distance));
        -moz-transform: translatex(var(--x-floating-distance));
        -ms-transform: translatex(var(--x-floating-distance));
        -o-transform: translatex(var(--x-floating-distance));
    }
    100% {
        transform: translatex(0);
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -ms-transform: translatex(0);
        -o-transform: translatex(0);
    }
}