asp.net - CSS 3 动画效果在 IE 中不起作用

Question

我正在尝试包含来自 Liffect - Effect for Lists 的精美动画效果列表进入我的 ASP.NET 应用程序。

<form id="form1" runat="server">
    <div>
        <ul effects="pageTop">
            <li>
                <img src="Images/1.jpeg" alt="Car" /></li>
            <li>
                <img src="Images/2.jpeg" alt="Car" /></li>
            <li>
                <img src="Images/3.jpeg" alt="Car" /></li>
        </ul>
    </div>
    <script type="text/javascript">            
        $(document).ready(function () {
            $("ul[effects] 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[effects] li").size() - 1) {
                    $("ul[effects]").addClass("play")
                }
            });
        });
    </script>
</form>

在这里您可以找到 JS Fiddler .

经过几个小时的努力，我刚刚注意到这在 Firefox 16.x 中有效，但在 IE 9 中无效。这似乎是某种 CSS 3 问题，但不确定到底哪里错了。请帮助使其完全跨浏览器兼容(IE、Firefox、Chrome 等)

如果能告诉我一些关于 HTML 5 的跨浏览器兼容 CSS 3 hack 的好资源，我将不胜感激。

Answer 1

最好你看看这个关于 CSS3 Animation With jQuery Fallbacks 的内容: http://msdn.microsoft.com/en-us/magazine/hh304380.aspx

还有http://modernizr.com/对于“HTML 5 的跨浏览器兼容的 CSS 3 hacks”