使用CSS3实现分层动画

 1、使用JS对CSS3进行简单封装。

/*!
 * animation.js by A-K
 * Date: 2014-3-5
 */

Animation = function () {
    if (arguments.length <= 1) {
        return;
    };
    this.setVars.apply(this, arguments);
    this.update();
}

Animation.prototype = {
    //animation属性默认值
    DEFAULT_STYLE_VARS: {
        duration: 0,
        timingFunction: "ease",
        delay: 0,
        iterationCount: 1,
        direction: "normal",
        playState: "running",
        fillMode: "forwards"//“animation-fill-mode”默认值为“none”,修改默认为”forwards“即当动画完成后，保持最后一个属性值。
    },

    id: "",//动画元素id值
    el: null,//动画元素
    keyframesVars: {},
    animationName: "",
    styleVars: {},

    setVars: function (id, duration, keyframesVars, styleVars) {
        this.id = id;
        this.animationName = "animation_" + id.substr(1);
        this.el = document.querySelector(id);
        this.duration = duration;
        this.keyframesVars = keyframesVars;
        styleVars = styleVars || {};
        styleVars.duration = duration;
        styleVars.name = this.animationName; //animation-name属性
        //将默认对象和传入对象合并
        this.styleVars = Object.extend(this.DEFAULT_STYLE_VARS, styleVars, true);
    },

    /**
     * 更新动画
     */
    update: function () {
        this.creatKeyframes();
        this.setAnimation();
    },

    /**
     * 添加动画
     */
    add: function () {
        this.styleVars = {};
        this.keyframesVars = {};
        this.setVars.apply(this, arguments);
        this.update();
    },

    //创建动画帧
    creatKeyframes: function () {
        var token, style, sheet, rule, keyframe;
        //创建style对象，并获取关联的sheet对象
        style = document.createElement("style");
        document.head.appendChild(style);
        sheet = style.sheet;
        //创建一个名为keyframe的keyframe（webkit需要前缀）
        var token = window.webkitRequestAnimationFrame ? "-webkit-" : "";
        sheet.insertRule("@" + token + "keyframes "+ this.animationName +" {}", 0);
        keyframe = sheet.cssRules[0];
        //keyframe为0%时
        (keyframe.insertRule || keyframe.appendRule).call(keyframe,"0% {}");
        //获取元素默认样式并复制为初始帧样式
        this._cloneStyleValue(keyframe.cssRules[0], this.keyframesVars);
        //keyframe为100%时
        (keyframe.insertRule || keyframe.appendRule).call(keyframe, "100% {}");
        //设置帧样式
        this.setStyle(keyframe.cssRules[1], this.keyframesVars);
    },

    setAnimation: function () {
        var sv = this.styleVars;
        var el = this.el;
        el.style[objName] = objValue;
        for (var i in sv) {
            var objName = i;
            var objValue = sv[i];
            objName = "animation" + objName.replace(objName.charAt(0), objName.charAt(0).toUpperCase());
            el.style[objName] = objValue;
            this._addPrefixStyle(el, objName, objValue);
            //console.log(objName, objValue);
        }
    },

    /**
     * [设置样式]
     * @param {[object]} obj     [要设置样式的对象]
     * @param {[object]} attrObj [样式对象]
     */
    setStyle: function (obj, attrObj) {
        for (var i in attrObj) {
            var objName = i;
            var objValue = attrObj[i];
            //if (objName.indexOf("-") > 0) {
            //    var num = objName.indexOf("-");
            //    objName = objName.replace(objName.substr(num, 2), objName.substr(num + 1, 1).toUpperCase());
            //}
            obj.style[objName] = objValue;
            this._addPrefixStyle(obj, objName, objValue);
        }
    },

    //添加兼容前缀
    _addPrefixStyle: function (target, name, value) {
        name = name.replace(name.charAt(0), name.charAt(0).toUpperCase());
        target.style["webkit" + name] = value;
        target.style["moz" + name] = value;
        target.style["o" + name] = value;
        target.style["ms" + name] = value;
    },

    //复制样式值
    _cloneStyleValue: function (target, attrObj) {
        var elStyle = Object.getStyle(this.el);
        for (var i in attrObj) {
            var objName = i;
            var objValue = elStyle[i];
            target.style[objName] = objValue;
        }
    }
}

/**
 * [获取元素样式对象]
 * @param  {[Object]} target [要获取样式的对象]
 * @return {[Object]}        [样式对象。]
 */
Object.getStyle = function (target) {
    if (target.currentStyle) //判断是否是IE浏览器
        return target.currentStyle;
    else if (window.getComputedStyle)//如果不是IE，使用getComputedStyle获得样式对象
        return window.getComputedStyle(target, null);
}

/**
 * [合并对象值]
* @param {Object} target 目标对象。 
* @param {Object} source 源对象。 
* @param {boolean} deep 是否复制(继承)对象中的对象。 
* @returns {Object} 返回继承了source对象属性的新对象。 
 */
Object.extend = function (target, source, deep) {
    target = target || {};
    var sType = typeof source, i = 1, options;
    if (sType === 'undefined' || sType === 'boolean') {
        deep = sType === 'boolean' ? source : false;
        source = target;
        target = this;
    }
    if (typeof source !== 'object' && Object.prototype.toString.call(source) !== '[object Function]')
        source = {};
    while (i <= 2) {
        options = i === 1 ? target : source;
        if (options != null) {
            for (var name in options) {
                var src = target[name], copy = options[name];
                if (target === copy)
                    continue;
                if (deep && copy && typeof copy === 'object' && !copy.nodeType)
                    target[name] = this.extend(src ||
                    (copy.length != null ? [] : {}), copy, deep);
                else if (copy !== undefined)
                    target[name] = copy;
            }
        }
        i++;
    }
    return target;
};

 2、页面HTML

<body>
    <div id="scene0" class="scene">
        <div id="container0" class="container">
            <span class="car"></span>
            <span class="car"></span>
            <span class="car"></span>
            <span class="car"></span>
        </div>
        <div id="container1" class="container">
            <span class="car"></span>
            <span class="car"></span>
            <span class="car"></span>
            <span class="car"></span>
        </div>
    </div>
    <div id="scene1"  class="scene">
        <span id="bg0" class="bg"></span>
        <span id="cloud0" class="cloud"></span>
        <span id="cloud1" class="cloud"></span>
        <span id="cloud2" class="cloud"></span>
        <span id="cloud3" class="cloud"></span>
        <span id="logo" class="sprite"></span>
        <span id="title0" class="sprite"></span>
        <span id="title1" class="sprite"></span>
    </div>
</body>

 3、页面js

window.onload = function () {
    var an = new Animation();
    an.add("#scene0", "0.5s", { opacity: 0 }, { delay: "0s" });
    an.add("#logo", "0.5s", { opacity: 1 }, { delay: "0s" });
    an.add("#title0", "0.5s", { opacity: 1, top: "147px" }, { delay: "0.5s" });
    an.add("#title1", "0.6s", { opacity: 1, top: "249px" }, { delay: "0.8s" });
    an.add("#cloud0", "10s", { left: "-1024px" }, { timingFunction: "linear", iterationCount: "infinite", delay: "0s" });
    an.add("#cloud1", "10s", { left: "0px" }, { timingFunction: "linear", iterationCount: "infinite", delay: "0s" });
    an.add("#cloud2", "10s", { left: "-1024px" }, { timingFunction: "linear", iterationCount: "infinite", delay: "0s" });
    an.add("#cloud3", "10s", { left: "0px" }, { timingFunction: "linear", iterationCount: "infinite", delay: "0s" });
}