You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've been playing with CSS animations in SVG, they are really cool, but very cumbersome to get the basic stuff working. If I just want to make something blink on and off I have to do this:
{:style,%{type: "text/css"}," @-webkit-keyframes big-blink { from {opacity: 1.0} to {opacity: 0.0} } polygon.big-fade { -webkit-animation: big-blink 2s linear 0s infinite alternate; } "},
It would be nice to do this same thing with just a single attribute or by wrapping an element.
I'm starting to have second thoughts about this feature. Performing CSS animations on elements inside and SVG currently causes a lot of repaints on the browser. I profiled the link above and it was spending about 25% of the rendering threads time just computing and painting the rotation. If you create the same SVG and put the animation on the SVG element (instead of the the g element inside the SVG) it runs at 60fps without using almost any CPU at all.
I've been playing with CSS animations in SVG, they are really cool, but very cumbersome to get the basic stuff working. If I just want to make something blink on and off I have to do this:
It would be nice to do this same thing with just a single attribute or by wrapping an element.
OR
@film42 do you have any preference between wrapping vs attribute?
The text was updated successfully, but these errors were encountered: