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

中

我需要帮助：

循环JS。此外，我几乎可以肯定可以采取一些措施来简化重复的嵌套代码。
使运动平稳。即，使物体以单曲线飞行，描绘出“倾斜的8”形状，而不是4条直线。
如果可能的话，摆脱JS并用CSS3替换它。

对我的项目来说也不一定是必需的，但是如果有一种方法可以沿着路径旋转物体，那么它将是惊人的，所以它总是面向它前进的方向。就像你从上面看赛车一样。

Answer 1

我已将您的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声明来完成旋转项目，我将继续处理并尽快更新。到目前为止，我已经在每个浏览器中都进行了转换。另外，我倾斜整个动画的角度就像你问的那样，它看起来像一个无限的标志。如果没有复杂的数学运算或过渡和额外动画的高级使用，现在很难获得平滑的转弯是非常困难的，我不太清楚如何正确地做到这一点。我会看到可以做些什么。

Answer 2

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

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

2 个答案: