平滑移动，并可能将 JS 移动到 CSS3

Question

我有一个小工件。

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中

我需要什么帮助：

1. 循环 JS。此外，我几乎可以肯定可以做一些事情来简化重复的嵌套代码。
2. 使运动平稳。即，使物体以单条曲线飞行，沿着“倾斜 8”形状，而不是 4 条直线。
3. 如果可能，摆脱 JS 并用 CSS3 替换它。

我的项目也不一定需要，但如果有一种方法可以沿途旋转对象，使其始终朝向它前进的方向，那就太棒了。就像您从高处观看赛车一样。

Answer 1

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

它是循环的并使用 CSS3，可在 IE 10、chrome、firefox 和 safari 中运行。我没有 Opera，所以我无法测试，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 声明来旋转项目，我将尽快处理并更新它。到目前为止，我已经获得了可以在每个浏览器中工作的转换。此外，我按照您的要求将整个动画倾斜了一个角度，使其看起来像一个无穷大符号。如果没有复杂的数学运算或高级使用过渡和额外的动画，现在很难获得平滑的拐角转弯，我不太确定如何正确地做到这一点。我会看看能做些什么。

Answer 2

试试这个：http://jsfiddle.net/Tn7UE/1/ 我添加了transform:rotate(); 来改变方向。和setInterval for 循环。