I've recently started experimenting with Anime.js. I have a piece of code that I'm using to animate a div element with an id of a.
anime({
targets: "#a",
translateX: 250,
color: "#fff",
backgroundColor: "hsl(200, 50%, 50%)",
loop: true,
direction: 'alternate',
easing: 'easeInOutQuad'
});
The issue I'm facing is that when the animation starts, the background-color of the element appears black, even though the CSS doesn't specify a background color. After some investigation, it seems that the default background color of the element is rgba(0,0,0,0), and Anime.js may not work well with colors containing alpha channels. Adding a background color in the CSS does resolve the problem, but the alpha channel is not preserved during the animation.
If I want to animate from a transparent color like rgba(0,0,0,0) to a solid color, how can I achieve this using Anime.js? Unfortunately, my search didn't yield much information due to Anime.js being relatively new. If Anime.js doesn't support this feature, I'd appreciate any recommendations for other JavaScript animation libraries that do support animating colors with alpha channels.
To see what I've done so far, you can check out a quick demo I created on CodePen: CodePen Demo