CODEWITHSUNDEEP
jquerycssanimation
3gwebtrain
3gwebtrain

Reputation: 15293

How to animate a ball along the curved path using css3 animation?

I have this scenario to animate a ball along a curved path. I don't have any idea to implement this using the css3. I know there is no path animation kind of stuff.

Is there a way to animate a ball on a curved background.

here is Live Demo

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>

Upvotes: 4

Views: 1056

Answers (1)

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

This is not a complete solution to your Question, but you asked for how can I define a path in css animation, so this is how you can:

JSFIDDLE

div.ball {
    background : green;
    width:20px; height:20px;
    border-radius:50%;

   -webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */ 
   animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+,IE 10+, safari 5 */
}

@keyframes path {
    0% { transform: translateX(10px)  }
    10%   { transform:  translateX(0px)   translateY(20px)}
     20%   { transform:  translateX(20px)   translateY(40px)}
      30%   { transform:  translateX(50px)   translateY(52px)}
     40%   { transform:  translateX(150px)   translateY(50px)}
}

If you see at the code you are actually defining the path for the ball to move as X,Y

Upvotes: 2

Related Questions