.soccer {
    background: url("http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg") no-repeat center;
    background-size: 100px 100px;
    height: 100px;
    width: 100px;
    position: relative;
    will-change: transform;
    animation: roll-x 7.5s linear infinite;
}

/* Avanza de izquierda a derecha sin usar left fijo */
@keyframes roll-x {
    0% {
        transform: translateX(0) rotate(-360deg);
    }

    50% {
        transform: translateX(calc(80vw - 120px)) rotate(360deg);
    }

    100% {
        transform: translateX(0) rotate(-360deg);
    }
}

/* Ajuste extra para pantallas muy pequeñas */
@media (max-width: 420px) {
    .soccer {
        background-size: 84px 84px;
        height: 84px;
        width: 84px;
    }

    @keyframes roll-x {
        0% {
            transform: translateX(0) rotate(-360deg);
        }

        50% {
            transform: translateX(calc(80vw - 104px)) rotate(360deg);
        }

        100% {
            transform: translateX(0) rotate(-360deg);
        }
    }
}

.world-cup {
    color: #82AE6F;
    text-align: center;
}