How to change position of a sphere overtime using css - html

Question

I am new to CSS and still don't get a lot of stuff! Using only CSS animations I have to create a spinning animation over a roulette.I have to create a sphere and as a background use a roulette img. My question is how can I change the position of the sphere every 10% of the animation, so it can make a full circle around the roulette.
This is the img I am using as a background: http://www.casinoanswers.com/wp-content/uploads/2010/03/american-roulette-wheel.gif
HTML:
<div id="roulette">
<figure class="circle"></figure>
</div>
CSS:
#roulette{
background-image: url("american-roulette-wheel.gif");
width:395px;
height:400px;
margin:0;
}
.circle {
position:fixed;
top:84px;
left:190px;
border-radius: 50%;
height: 30px;
width: 30px;
margin:0;
background: radial-gradient(circle at 10px 10px, #5cabff, #000);
}
Thank you!

Answer 1

By placing your ball/circle image inside a container div and rotating that div, you can create the illusion of the ball traveling around the background. You will have to play with positioning to get it exact, and it might be cool to rotate the ball as well as the container div.
<div id="roulette">
<div class="circleContainer">
<figure class="circle"></figure>
</div>
</div>
#roulette{
background-image: url(http://www.casinoanswers.com/wp-content/uploads/2010/03/american-roulette-wheel.gif);
width:395px;
height:400px;
margin:0;
}
.circle {
border-radius: 50%;
height: 30px;
width: 30px;
margin:0;
background: radial-gradient(circle at 10px 10px, #5cabff, #000);
}
#-webkit-keyframes spinnerRotate
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
#-moz-keyframes spinnerRotate
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
#-ms-keyframes spinnerRotate
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
.circleContainer{
height: 250px;
top: 80px;
position: fixed;
left: 190px;
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spinnerRotate;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spinnerRotate;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
https://jsfiddle.net/2gat1m5y/1/