Looking to create a cool animation where a ball moves along a curved path? Struggling to figure out how to do it with CSS3 since there's no built-in path animation feature?
Wondering if it's possible to animate a ball on a curved background?
Catch the Live Demo here!
This is my code:
div.path {
background:url(https://dl.dropboxusercontent.com/u/10268257/images/path.png) no-repeat center bottom;
width:397px;
height:66px;
position: relative;
}
div.ball {
background : green;
width:20px; height:20px;
border-radius:50%;
}<div class="container">
<div class="path">
<div class="ball"></div>
</div>
</div>