Question

I have a small working piece.

HTML:

<div id="it">X</div>

CSS:

#it {
    background: blue;
    width: 40px;
    text-align: center;
    color: white;
    padding: 10px 0;
    border: solid 1px black;
    border-radius: 25px;
    position: absolute;
    left: 100px;
    top: 100px;
}

JS:

$('#it').animate({
    left: '+=100',
    top: '+=100'
}, 400, function() {
        $(this).animate({
        top: '-=100'
    }, 400, function() {
        $(this).animate({
            left: '-=100',
            top: '+=100'
        }, 400, function() {
            $(this).animate({
                top: '-=100'
            }, 400);
        });
    });
});

Everything aforementioned put together in this jsfiddle

What I need help with:

1. Loop the JS. Besides, I’m almost sure that something can be done to simplify that repeated nested code.
2. Make the movement smooth. I.e., make the object fly in a single curved line tracing a “tilted 8” shape, rather than in 4 strait lines.
3. If possible, get rid of JS and replace it with CSS3.

Also not necessarily required for my project, but would be amazing if there was a way to rotate the object along the way so it always faces the direction it is heading. Like as if you were watching a race car from above.

Answer 1

I have already converted your JavaScript to CSS3: here it is for you.

It is looped and uses CSS3, and works in IE 10, chrome, firefox, and safari. I don’t have opera so I cannot test and IE 9 and down will need to use a CSS3 shiv.

@-webkit-keyframes move {
0%   {top:  100px;
      left: 100px;}
25%  {top:  250px;
      left: 250px;}
50%  {top:  100px;
      left: 250px;}
75%  {top:  250px;
      left: 100px;}
100% {top:  100px;
      left: 100px;}
}

That code replaces the JavaScript you had; it creates the animation in segments. It is only the webkit part of the animation syntax though, to make sure you cover all of your bases, don’t forget @-moz- and @keyframes for the standard spec animation syntax.

-webkit-animation:move 5s infinite;

This CSS3 rule tells the parser what element should be using the declared animation.

Rotating the item can be done using the transform css declaration, which I will work on and update ASAP.​ So far I have gotten transforms to work in every browser. Additionally, I tilted the whole animation at an angle just like you asked so that it will look like an infinity sign. Getting a smooth corner turn is quite difficult right now without complex math or advanced use of transitions and extra animations, I am not quite sure how to do it right. I will see what can be done.