Ball roll right

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-right"></div>
</body>
</html>

CSS

.ball-right {
    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: right-spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -moz-animation: right-spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -ms-animation: right-spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    animation: right-spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;

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

    position: absolute;
    left: 0;
}


/* Spinning the sphere using key frames */
@-ms-keyframes right-spin {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}

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

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

@-webkit-keyframes right-spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
/* 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%;
    }
}