Search code examples
javascriptcsssvgcss-animationssvg-animate

Animate SVG property such as fill color without third-party library

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
Solution

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

    You can trigger the animation from this SO answer