Javascript Anime.js backgroundColor提供意外结果

所以我一直在玩Anime.js。我正在使用这段简短的代码尝试用一个字母id为

a

的

div

标记制作动画

anime({
    targets: "#a",
    translateX: 250,
    color: "#fff",
    backgroundColor: "hsl(200, 50%, 50%)",
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutQuad'
});

问题是（至少对我来说，在谷歌Chrome中）这个元素似乎是在动画开始时以黑色的css

背景色开始的，尽管它没有在css中专门设置任何背景色。稍微挖掘一下似乎表明元素的默认背景色是rgba（0,0,0,0），并且Anime.js在使用alpha通道的颜色时似乎不起作用。我认为这解释了为什么动画以黑色开始。在css中为元素设置背景色似乎可以解决这个问题，即使它有一个alpha通道，但在动画中永远不会使用alpha通道

但是如果我想从背景色
rgba（0,0,0,0）
设置动画为纯色，该怎么办？谷歌搜索没有透露太多信息，因为Anime.js是相当新的。有人知道我可以用什么方法在Anime.js中实现这一点吗？如果Anime.js不支持此功能，是否有人知道另一个JavaScript动画库支持此功能？我需要支持使用alpha通道设置颜色动画

为了方便起见，这里有一个我到目前为止所做的演示
我不清楚anime.js是否支持不透明。但是，在安装了JQuery UI的情况下，您可以使用用户JQuery设置动画

$('#a').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)' },1000);

您可以在
后期答案中看到完整答案，但我目前正在玩anime.js，找到了您的问题。可以为背景动画定义开始值


$（文档）.ready（函数（）{
动画({
目标：“.box”，
translateX:250，
颜色：“fff”，
背景颜色：[“hsl（250,75%，50%），“hsl（200,50%，50%）”，
循环：对，
方向：'交替'，
放松：'轻松外四'
});
});
div{
宽度：20px；
高度：20px；
背景：红色；
位置：相对位置；
左：0；
}

Anime.js动画背景色
链接对我不起作用。还有，你知道有哪个库的性能比jQuery更好吗？@AaronBeaudoin修复了链接，没有，很抱歉，我不知道有哪个库的性能更好。看起来很酷，但我现在付不起许可费。