How to create an infinite Sign Trajectory using CSS animation?

Question

I want to create infinite symbol animation using div. What animation needs to be done on the div to achieve this.

Thanks in advance!

Answer 1

Well for example in this picture :

All the purple are dots where your 'ball' should go through. You can see each dot as a key-frame. There are 16 dots (2 same in the center) in 100% time. That means every key-frame is 6.25% of the total time.

The ball is easially created with CSS:

.ball
{
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 40px;
    position: absolute;
}

Basically you define each dots left and top position.

Now i've made a really little example, because i haven't much time ;p But i hope you get the idea what i'm trying to do: jsFiddle

More info about animation here.

Update

I couldn't let this answer stand without a working example. So hereby:

jsFiddle

As you can see the transitions aren't that smooth. How more path points you add, how more smooth the animation curves get.

Answer 2

Tried a different approach. Still all just CSS3 animation.

Two balls running along an orbit twice. One clockwise and the other one counter-clockwise. Both orbits (divs) are positioned seamlessly next to each other. Until the first one completes his run, the other one is hidden. When they meet in the middle, the first one hides and the second one starts his run.

<div id="left"></div>
<div id="right"></div>

https://jsfiddle.net/leymannx/LWk74/ tested on Chrome 31, Firefox 26, Safari 7 and IE 10 & 11 (cross browser compatibility incorporated in the fiddle)

#left {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 40px;
  position: absolute;
  top: 150px;
  left: 150px;

  animation: animationLeft 5s linear infinite;
}

#right {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 40px;
  position: absolute;
  top: 150px;
  left: 350px;

  animation: animationRight 5s linear infinite;
}

@keyframes animationLeft {
  0%    { transform: rotate(0deg) translateX(100px); }
  50%   { transform: rotate(360deg) translateX(100px); visibility: hidden; }
  100%  { transform: rotate(360deg) translateX(100px); visibility: hidden; }
}

@keyframes animationRight {
  0%    { transform: rotate(-180deg) translateX(100px); visibility: hidden; }
  50%   { transform: rotate(180deg) translateX(100px); visibility: hidden; }
  100%  { transform: rotate(-180deg) translateX(100px); }
}

More information on animating circular paths exemplified with planets can be found here. There also rotate(360deg) and translateX(100px) is explained very well.