Ball Left

by VisheshBansal

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta author="Vishesh Bansal">
    <link rel="stylesheet" href="ballmovement.css">
</head>
<body>
<div class="ball-left"></div>
</body>
</html>

CSS

.ball-left {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background: red;
    background: -webkit-radial-gradient(25px 25px, circle, red, #000);
    background: -moz-radial-gradient(25px 25px, circle, red, #000);
    background: radial-gradient(25px 25px, circle, red, #000);

    /* Animation to spin and move the sphere */
    -webkit-animation: spin 1000ms linear infinite, moveRightToLeft 5s linear infinite;
    -moz-animation: spin 1000ms linear infinite, moveRightToLeft 5s linear infinite;
    -ms-animation: spin 1000ms linear infinite, moveRightToLeft 5s linear infinite;
    animation: spin 1000ms linear infinite, moveRightToLeft 5s linear infinite;

    -webkit-transition: all 1s ease;
    transition: all 1s ease;

    position: absolute;
    left: 0;
}
/* Move sphere from left to right */
@-moz-keyframes moveLeftToRight {
    0% {
        left: -100px;
    }
    100% {
        left: 100%;
    }
}

@-ms-keyframes moveLeftToRight {
    0% {
        left: -100px;
    }
    100% {
        left: 100%;
    }
}

@keyframes moveLeftToRight {
    0% {
        left: -100px;
    }
    100% {
        left: 100%;
    }
}

@-webkit-keyframes moveLeftToRight {
    0% {
        left: -100px;
    }
    100% {
        left: 100%;
    }
}

/* Move sphere from right to left */
@-moz-keyframes spin {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@-ms-keyframes spin {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(360deg);
    }
    to {
        -webkit-transform: rotate(0deg);
    }
}

@-moz-keyframes moveRightToLeft {
    0% {
        left: 100%
    }
    100% {
        left: -100px;
    }
}

@-ms-keyframes moveRightToLeft {
    0% {
    ...