[FEATURE-15148] Need some help for animated icons

[nader.chinichian]

Hi
I see some wonderful animated icons in following link from material.io which use CSS3 to create them.
https://material.io/design/iconography/animated-icons.html#

Right now perspective style class support limited set of option for animation. and I only can change change color, move, rotate svg object by changing size, position and rotation of object and apply transition:all .5s linear in style section of object.

What I mostly need transition from one svg shape to another svg shape. There are a lot good tutorial for creating these effect with a lot of line of CSS3 code but I don’t know how should I deploy them in perspective.
what is the straight forward way to put my CSS3 code for each object?

[jball]

Hi @nader.chinichian, Those animations are pretty awesome! They all involve animating different layers of an SVG, which is something we don’t support at the moment. I can open a feature request for allowing enhanced animations of icons.

To get a similar result with what is available today, you can modify the path property of your icons based on user events (onMouseEnter, onMouseLeave, etc). You can also add/remove classes to adjust the CSS as you were mentioning: