[Feature Request] Use svg <animate> instead of css

[BeiyanYunyi]

The <svg> element have <animate> element, which can set animates for its parent element. Documents are avaliable on MDN.

Here're some advantages:

• Declarative. Declarable in TSX, no goober, no keyframes string.
• No transform.
• Smaller and faster. Without js in animation, solid can use setInnerHTML to render svg.

Here's my code in progress. It's not ready to be merged because there're still something to do:

• SuccessIcon has not been rewritten.
• The animation is linear now, I'm trying to use calcMode so that we can have a cubic-bezier timed animation.
• We can refactor some <animate /> into independent variables.

[ardeora]

Ooh this is very interesting! I am at work right now but I will take a look at this once I get off. Maybe we can use this to eliminate the goober dependency all together? The only thing to take care of is entry and exit animation on the container element. I was thinking we can use a ref and manually add those animation styles using the animate API https://developer.mozilla.org/en-US/docs/Web/API/Element/animate Support across browser seems good?

[BeiyanYunyi]

Solved at #14