Question

I am trying to include this beautiful list of animation effects from
Liffect – Effect for Lists into my ASP.NET application.

<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>

Here you can find the JS Fiddler.

After struggling few hours, I have just noticed that this is working in Firefox 16.x but not in IE 9. It seems some kind of CSS 3 problem but not sure exactly where is it wrong. Please help making it fully cross-browser compatible (IE, Firefox, Chrome etc.)

I would also appreciate for letting me know about some good resources for cross-browser compatible CSS 3 hacks for HTML 5.

Answer 1

In IE8 and below you won’t have any support for CSS3. Check this nice reference to see if what you want to use is available in major browsers.

EDIT to your last update: Animation is not supported in IE9