css3 animation-delay only working in Firefox？

Question

Code from http://ademilter.com/lab/liffect/ But animation-delay does no working on chrome and IE11，why?They will do animation, but No delay,css has been written into it, and the browser prefixes distinction is correct, but only in Firefox animated delayed effective.:(

<ul data-liffect="pageTop">
    <li><img src="images/block_03.jpg" alt="Lion"></li>
    <li><img src="images/block_03.jpg" alt="Lion"></li>
    <li><img src="images/block_03.jpg" alt="Lion"></li>
</ul>


<style type="text/css">
ul[data-liffect="pageTop"] li {
    opacity: 0;
    position: relative;
    -webkit-animation: pageTop 600ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-transform-origin: 50% 0%;
    -moz-animation: pageTop 600ms ease both;
    -moz-animation-play-state: paused;
    -moz-transform-origin: 50% 0%;
    -o-animation: pageTop 600ms ease both;
    -o-animation-play-state: paused;
    -o-transform-origin: 50% 0%;
    animation: pageTop 600ms ease both;
    animation-play-state: paused;
    transform-origin: 50% 0%;
}

ul[data-liffect="pageTop"].play li {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes pageTop {
    0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); }
}

@-moz-keyframes pageTop {
    0% { opacity: 0; -moz-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); }
}

@-o-keyframes pageTop {
    0% { opacity: 0; -o-transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); }
}

@keyframes pageTop {
    0% { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}
</style>



<script type="text/javascript">
    $(document).ready(function() {
        $("ul[data-liffect] li").each(function (i) {
            $(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
                + "-moz-animation-delay:" + i * 300 + "ms;"
            + "-o-animation-delay:" + i * 300 + "ms;"
            + "animation-delay:" + i * 300 + "ms;");
        if (i == $("ul[data-liffect] li").size() -1) {
            $("ul[data-liffect]").addClass("play")
            }
        });
    });
</script>

Answer 1

Because the animation is already applied.
You can merge the properties to one. Or use the other class name to enable animation and assign after you set up delay.

ul[data-liffect="pageTop"].play li {
    opacity: 0;
    position: relative;
    -webkit-animation: pageTop 600ms ease both;
    -webkit-animation-play-state: running;
    -webkit-transform-origin: 50% 0%;
    -moz-animation: pageTop 600ms ease both;
    -moz-animation-play-state: running;
    -moz-transform-origin: 50% 0%;
    -o-animation: pageTop 600ms ease both;
    -o-animation-play-state: running;
    -o-transform-origin: 50% 0%;
    animation: pageTop 600ms ease both;
    animation-play-state: running;
    transform-origin: 50% 0%;
}

http://jsfiddle.net/emn178/76mSR/