[webkit-help] SVG & CSS Transitions

digital wave / Reiner Pittinger rp at digital-wave.de
Tue Nov 30 13:47:40 PST 2010

Hi Darren,

Am 30.11.2010 um 17:43 schrieb Darren Lee:

> Hey all,
> I am working on an SVG app but I have a problem. SVG animations are really slow on devices, CSS transitions on the other hand seem to work really well. On devices like the iPad I think CSS transitions are hardware accelerated.
CSS transitions are indeed hardware-accelerated on iOS, so you should stick to them whenever possible.
> I tried to use CSS transitions on SVG elements but it did not seem to work. I tried svgElem.style.webkitTransition = … and svgElem.setAttribute(“style”, “-webkit-transition…”);
> Is it possible to use CSS animations on SVG elements? If not are there any good techniques to improve the performance/framerate of SVG animations for devices?
Unfortunately the transitions/keyframe animations indeed may only work on bitmaps, which probably is because UIWebView internally uses UIImageView to render them.

In addition, -webkit-animaton definitions need to be present when the document loads - they cannot be added at runtime.

You could try to put the CSS into the SVG file (instead onto the HTML document that includes the SVG) and see if that works.

Good luck,


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-help/attachments/20101130/77b16f65/attachment.html>

More information about the webkit-help mailing list