Android 4.4 vs iOS上CSS3转换缓慢

我使用基于关键帧的CSS3动画在div之间滑动，贝塞尔曲线为(0.10,0.70,0.10,1)，持续时间为400毫秒

Android上的性能(在HTC One M8和S4上使用原生4.4网页视图和基于blink的Crosswalk进行测试)非常不稳定，帧率非常低。从iOS 4s到iOS 5s的性能都非常完美，接近原生性能。

有人可以解释什么可能导致这和如何纠正它的一些建议，它是否需要使用基于javascript的动画解决方案，如VelocityJS?

如果这个问题有点模糊，我很抱歉，但我不认为我在这个问题上添加了大量的CSS关键帧规则会对任何人有帮助，所以我省略了它。

下面是一个简单的例子来说明我所说的

http://jsfiddle.net/hu69H/

(在台式机上运行良好，但不是很完美，除了iOS，它在移动设备上根本没有性能)

下面是执行滑动的逻辑部分的代码片段:

var $ = function (id) {
        "use strict";
        return document.getElementById(id);
    },
    slideOpts = {
        sl: ['slin', 'slout'],
        sr: ['srin', 'srout'],
        popin: ['popin', 'noanim'],
        popout: ['noanim', 'popout'],
        noanim: ['noanim', 'noanim']
    },
function Slide(slideType, vin, vout, callback) {
    var vIn = $(vin),
        vOut = $(vout),
        onAnimationEnd = function () {
            vOut.classList.add('hidden');
            vIn.classList.remove(slideOpts[slideType][0]);
            vOut.classList.remove(slideOpts[slideType][1]);
            vOut.removeEventListener('webkitAnimationEnd', onAnimationEnd, false);
            vOut.removeEventListener('animationend', onAnimationEnd);
        };
    if (slideType == 'noanim'){
        vIn.classList.remove('hidden');
        vOut.classList.add('hidden');
    } else {
        vOut.addEventListener('webkitAnimationEnd', onAnimationEnd, false);
        vOut.addEventListener('animationend', onAnimationEnd);
        if (callback && typeof (callback) === 'function') {
            callback();
        }
        vIn.classList.remove('hidden');
        vIn.classList.add(slideOpts[slideType][0]);
        vOut.classList.add(slideOpts[slideType][1]);
    }