GPU accelerated CSS animation vs SVG native animations

Question

My question is, what is faster, native SVG animation tags, like for example:

<path d="something very long and non-human-friendly">
    <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0" to="360" begin="0s" dur="3s" fill="freeze"
    repeatCount="indefinite" />
</path>

or CSS animations, for example:

path {
    animation: foo 3s ease-out infinite;
}

@keyframes foo {
    50% {
        transform: rotate(360);
}

Maybe it's better to use SVG animations since SVG has better browser support?

Also related: Since CSS transforms trigger hardware acceleration, I was also wondering if native SVG animation tags also trigger GPU acceleration or are painted by the browser. If not, is it possible to force hardware acc on SVG native animations?

Cheers!

Answer 1

I did a lot of reading on this topic as I was having performance issues on my multi-platform Phonegap app and to keep things simple:

No one really knows which CSS are universally hardware accelerated as standards implementation is fragmented, it looks like iOS is leader in CSS HW acceleration but do you want to limit optimal experience to that market share?

Eventually I came across this article which tries to explain that JS solutions have better compatibility and performance. While adding abilities that are simply out of reach for CSS. Do Keep in mind that both articles are written by the creator of GSAP and thus biased, but after simply giving it a try I was convinced.

A more elaborate version of the aforementioned article can be found here.