无需第三方库即可对SVG属性进行动画处理，例如填充颜色

Question

How can I make the fill color of an SVG circle animate once from a given start (opaque black) to a given end (transparent/none). This should be triggered by a JavaScript function and the animation is a one-shot lasting a few hundred milliseconds. How can I do this with DOM/CSS without having to draw in a third-party library such as Snap.svg?

So when my callback is invoked

• set immediately fill: black
• transition over period of 200ms to fill: none

Answer 1

Using pure JS you can achieve this. This thread has a function that will do what you're asking for: Animate without JQuery .

The function takes the element, the attribute to animate, and the speed in ms to perform the animation. In your case something like this would be appropriate animate(circle, fill, 300) . You'll likely have to alter it a bit to adapt to the alpha value decreasing, but this is the idea.

Answer 2

Try the <animate> function. Here's a demo that doesn't have external library.

You can trigger the animation from this SO answer