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.

Was it helpful?

Solution 2

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

OTHER TIPS

Best you take a look at this regarding CSS3 Animation With jQuery Fallbacks: http://msdn.microsoft.com/en-us/magazine/hh304380.aspx

And also http://modernizr.com/ for "cross-browser compatible CSS 3 hacks for HTML 5"

What ever css you used is CSS3 IE7 and IE8 will not support css3 properties.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top