.loader-citronnade div {
    height: 100px;
    width: 100px;
    position: relative;
    animation-delay: 0.8s;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.loader-citronnade .top-left {
    animation-name: start-top-left;
}

.loader-citronnade .top-right {
    animation-name: start-top-right;
}

.loader-citronnade .bottom-right {
    animation-name: start-bottom-right;
}

.loader-citronnade .bottom-left {
    animation-name: start-bottom-left;
}

@keyframes start-top-left {
    22%, 28% {
        transform: translateX(calc(100% + 1rem));
    }
    48%, 53% {
        transform: translate(calc(100% + 1rem), calc(100% + 1rem));
    }
    74%, 78% {
        transform: translate(0%, calc(100% + 1rem));
    }
    96%, 100% {
        transform: translateY(0%);
    }
}
@keyframes start-top-right {
    22%, 28% {
        transform: translateY(calc(100% + 1rem));
    }
    49%, 53% {
        transform: translate(calc(-100% - 1rem), calc(100% + 1rem));
    }
    74%, 78% {
        transform: translate(calc(-100% - 1rem), 0);
    }
    96%, 100% {
        transform: translateY(0%);
    }
}
@keyframes start-bottom-left {
    22%, 28% {
        transform: translateY(calc(-100% - 1rem));
    }
    49%, 53% {
        transform: translate(calc(100% + 1rem), calc(-100% - 1rem));
    }
    74%, 78% {
        transform: translate(calc(100% + 1rem), 0%);
    }
    96%, 100% {
        transform: translateY(0%);
    }
}
@keyframes start-bottom-right {
    22%, 28% {
        transform: translateX(calc(-100% - 1rem));
    }
    49%, 53% {
        transform: translate(calc(-100% - 1rem), calc(-100% - 1rem));
    }
    74%, 78% {
        transform: translate(0%, calc(-100% - 1rem));
    }
    96%, 100% {
        transform: translateY(0%);
    }
}