Does the Android Webview support CSS3 WebKit Animations?

Question

Does The WebView Control on Android OS support hardware accelerated css3 animations? And all the webkit css (for example: -webkit-transition bla bla) that I have that work on Safari Mobile do they work the same on android?

Solution 1

Yes, according to this page.. It supports starting from version 3.0 til last, beloved Jelly Bean ;)

On the other side developers experienced not super successful results. Quote from here:

CSS animations are supported by Android devices — but only if a single property is changed. As soon as you try to animate more than one property at once, the entire element disappears. In non-native Android browsers, the element will be visible for the duration of the animation, but will hide immediately after it’s finished.

and update from the same source:

..it turns out Android 4.0 actually addresses this issue. Still, we need to urge the authors of these resources to explicitly mention that full support isn’t available in previous versions of Android..

So final answer 4.0+ version support it in a good way..

UPDATE: From KitKat WebView is powered by Chromium (same engine as in Chrome browser) so from this Android version advanced HTML5 and CSS features should be fully supported.. More about this here

Hope u find it useful.. ;)

Solution 2

If you want webkit transitions to be animated hardware accelerated in an Android Webview you'll need to enable hardware acceleration in the manifest file like so:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    ... >

    ...

    <application ... android:hardwareAccelerated="true">
        ...
    </application>

</manifest>

It's not perfect, but it improves the rendering a lot.

Comments

[amartynov]

Your answer is about Browser application, but the question is about WebView control. I tested a CSS rotation animation (see stackoverflow.com/a/6410923/65899) inside a WebView, and it worked only on the latest 4.4 KitKat.

[Ewoks]

Thanks. Android WebView in KitKat is powered by Chromium engine, before it was powered by WebKit (basically same as old default browser..) so I updated the answer

[amartynov]

My fault: I was trying to animate :before pseudo-element, and WebView had a bug until KitKat (probably this one bugs.webkit.org/show_bug.cgi?id=92591). Except this, your answer is absolutely right.