Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS 3 animation effects are not working in IE
    primarykey
    data
    text
    <p>I am trying to include this beautiful list of animation effects from <a href="http://ademilter.com/lab/liffect/" rel="nofollow"> Liffect - Effect for Lists</a> into my ASP.NET application.</p> <pre><code>&lt;form id="form1" runat="server"&gt; &lt;div&gt; &lt;ul effects="pageTop"&gt; &lt;li&gt; &lt;img src="Images/1.jpeg" alt="Car" /&gt;&lt;/li&gt; &lt;li&gt; &lt;img src="Images/2.jpeg" alt="Car" /&gt;&lt;/li&gt; &lt;li&gt; &lt;img src="Images/3.jpeg" alt="Car" /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(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") } }); }); &lt;/script&gt; &lt;/form&gt; </code></pre> <p>Here you can find the <a href="http://jsfiddle.net/furqansafdar/ukD6X/9/" rel="nofollow">JS Fiddler</a>.</p> <p>After struggling few hours, I have just noticed that this is working in <code>Firefox 16.x</code> but not in <code>IE 9</code>. It seems some kind of <code>CSS 3</code> problem but not sure exactly where is it wrong. Please help making it fully cross-browser compatible (<code>IE</code>, <code>Firefox</code>, <code>Chrome</code> etc.)</p> <p>I would also appreciate for letting me know about some good resources for cross-browser compatible <code>CSS 3</code> hacks for <code>HTML 5</code>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload