CODEWITHSUNDEEP
javascriptcsssvgcss-animationssvg-animate
0__
0__

Reputation: 67280

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

Upvotes: 1

Views: 1241

Answers (2)

Alvin K.
Alvin K.

Reputation: 4379

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

You can trigger the animation from this SO answer

Upvotes: 1

Art Cooper
Art Cooper

Reputation: 31

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.

Upvotes: 1

Related Questions