1

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
0__
  • 66,707
  • 21
  • 171
  • 266

2 Answers2

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.

Community
  • 1
  • 1
Art Cooper
  • 31
  • 4
1

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

You can trigger the animation from this SO answer

Community
  • 1
  • 1
Alvin K.
  • 4,329
  • 20
  • 25