jquery - 平稳移动，并且可能将JS移至CSS3

我有一块小东西。

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);
        });
    });
});

前面提到的所有内容放在this jsfiddle中

我需要什么帮助：


循环JS。此外，我几乎可以肯定，可以做一些事情来简化重复的嵌套代码。
使运动平稳。即，使对象沿跟踪“倾斜8”形的单个曲线而不是4条海峡线飞行。
如果可能，请摆脱JS并将其替换为CSS3。


同样不是我的项目所必需的，但是如果有一种方法可以使对象一直旋转，使其始终面向其前进方向，那就太神奇了。就像您从上方观看赛车一样。

最佳答案

我已经将您的JavaScript转换为CSS3：here it is for you。

它是循环的并使用CSS3，并且可以在IE 10，chrome，firefox和safari中使用。我没有歌剧，所以我无法测试，IE 9及更低版本将需要使用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;}
}

该代码取代了您拥有的JavaScript；它按段创建动画。不过，这只是动画语法的webkit部分，为确保覆盖所有基础，请不要忘记标准规范动画语法的@-moz-和@keyframes。

-webkit-animation:move 5s infinite;

这个CSS3规则告诉解析器应该使用声明的动画来显示哪个元素。

可以使用transform CSS声明来旋转项目，我将对其进行处理并尽快更新。到目前为止，我已经获得了可以在每种浏览器中使用的转换功能。另外，我按照您的要求将整个动画倾斜一个角度，以使其看起来像一个无穷大的符号。如果没有复杂的数学运算或对过渡和额外动画的高级使用，现在很难获得平稳的转弯，我不确定如何正确地进行转弯。我将看到可以做什么。

关于jquery - 平稳移动，并且可能将JS移至CSS3，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14060988/