jquery - 平滑移动，并可能将 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. 使 Action 流畅。即，使物体沿“倾斜 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 规则告诉解析器哪个元素应该使用声明的动画。

旋转元素可以使用转换CSS声明来完成，我将尽快处理并更新。到目前为止，我已经让转换可以在每个浏览器中工作。此外，我按照您的要求将整个动画倾斜了一定 Angular ，使其看起来像一个无穷大符号。如果没有复杂的数学或高级的过渡和额外动画的使用，现在获得平滑的拐 Angular 是相当困难的，我不太确定如何正确地做到这一点。我会看看能做些什么。