javascript - JS同步动画

Question

我正在尝试使用 velocity.js 为元素的 translateX 和 rotateZ 属性设置动画，这是我的代码:

$(document).ready(function () {
    $("div").velocity({
        rotateZ: '-10deg'
    }, {
        loop: true
    });
    $("div").velocity({
        'translateX': '2000px'
    });
});

我想实现的是让元素直线向右移动同时始终上下振动(无限旋转10度)，但结果是循环不仅应用于两个属性在旋转上，然后一旦开始翻译，旋转就会变大。

jsfiddle

Answer 1

与其使用单个元素并应用两个动画，不如创建两个元素并为每个元素应用一个动画。

我会考虑以下替代方案:

<div class="outer">
    <div class="inner">I'm trying to vibrate and move.</div>
</div>

$(document).ready(function () {
    $(".outer").velocity({
        rotateZ: '-10deg'
    }, {
        loop: true
    });
    $(".inner").velocity({
        'translateX': '2000px'
    });
});