.logo-anim #logo-anim-bg {
    animation: bgSwapSmooth 6s steps(1) infinite;
}

.logo-anim #logo-anim-logo1 {
    animation: logoSlideLeftLoop 3s ease-in-out infinite, logoSwapSmooth 6s steps(1) infinite;
}

.logo-anim #logo-anim-logo2 {
    animation: logoSlideRightLoop 3s ease-in-out infinite, logoSwapSmooth 6s steps(1) infinite;
}

@keyframes bgSwapSmooth {
    0%, 40% {
        fill: #001592;
    }

    50%, 90% {
        fill: #ffffff;
    }

    100% {
        fill: #001592;
    }
}

@keyframes logoSwapSmooth {
    0%, 40% {
        fill: #ffffff;
    }

    50%, 90% {
        fill: #001592;
    }

    100% {
        fill: #ffffff;
    }
}

@keyframes logoSlideLeftLoop {
    0% {
        opacity: 0;
        transform: translateX(-1500px);
    }

    20%,
    80% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        /*transform: translateX(-1500px);*/
    }
}

@keyframes logoSlideRightLoop {
    0% {
        opacity: 0;
        transform: translateX(1500px);
    }

    20%,
    80% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        /*transform: translateX(1500px);*/
    }
}