anime.js - さまざまなタイミングでアニメーションを組み合わせるにはどうすればよいですか？

Question

要素に2つの異なるanime.jsアニメーションを適用したいと思います。 最後のものだけが適用されます。

https://plnkr.co/edit/p5fRlznLA98056SxDmIh?p=preview

$(document).ready(function() { 
    anime({ 
    targets: ".box", 
    duration: 2000, 
    loop: true, 
    easing: 'easeInOutSine', 
    direction: 'alternate', 
    translateX: 250 
    }); 
    anime({ 
    targets: ".box", 
    duration: 1000, 
    loop: true, 
    easing: 'easeInOutSine', 
    direction: 'alternate', 
    scale: 0.5 
    }); 
}); 

Answer 1

あなたは一つに両方のアニメーションをマージすることができますが、alternate方向は、特定のプロパティに適用することはできません。 しかし、あなたは同様の効果を達成するためにキーフレームを使用することができます。

anime({ 
    targets: ".box", 
    translateX: 250, 
    scale: [ 
     {value: .5}, 
     {value: 1} 
    ], 
    duration: 2000, 
    easing: 'easeInOutSine', 
    direction: 'alternate', 
    loop: true 
    });