StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Usually for these experimental features (so in general, if you're not sure about it, look it up) it's best to look up if it's supported by the browser. Since transitions are not completely supported by all major browsers, you need to add the prefix for all browsers that don't fully support it yet. So, according to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition#Browser_compatibility" rel="nofollow">MDN's Browser support list</a>, and <a href="http://gs.statcounter.com/#browser_version-ww-monthly-201309-201311" rel="nofollow">Statcounter's browser usage stats</a>, you should have the following:</p> <pre><code>.revision-span-in { opacity: 0; } .revision-span:not(.revision-span-out) { transition: 1s; -o-transition: 1s; -webkit-transition: 1s; } .revision-span-out { position:absolute; opacity: 0; } </code></pre> <p>Since <del>both webkit browsers don't have a generally used version that doesn't fully support it without prefix, and</del> firefox doesn't need a prefix, this should work. The problem you're having shows that you've not updated your firefox in a while, and if you're going to test how your site looks in other browsers, I strongly suggest making sure you've got the up-to-date version. Firefox already supports the syntax without <code>-moz-</code> prefix since version 16, and it's at version 26 now (with 25 being the most commonly used at the moment).</p> <p>Of course if you <em>really</em> want to support even the browsers that almost nobody even uses anymore due to automatic updating (such as Firefox <16), you should indeed like <del>Zach Saucier <em>(deleted his answer)</em></del> JoshC says also include the <code>-moz-</code> prefix. The <code>-ms-</code> prefix is not needed at all though, since every version of IE that does support transitions also supports it without needing that prefix.</p> <p>EDIT: added <code>-webkit-</code> for <a href="http://caniuse.com/css-transitions" rel="nofollow">Android/Blackberry default browser</a>.</p> <p><hr/></p> <h1>Extra bit (after seeing added dropbox link)</h1> <p>Considering the dropbox link, what I think is causing it is this: Firefox is still animating the first element when the second shows up, so it doesn't restart the animation.</p> <p>This could explain why it happens randomly: it only happens when Firefox has a few milliseconds of lag, and firefox continues playing the animation for the second item from the starting point of the second animation. This is likely caused by the fact that your items are nested, so the animation of the first row would be inherited by the animation of the second row, and so forth.</p> <p>Since your animation length is 0.5 seconds exactly, and the interval between showing elements is also 0.5 seconds exactly, if there is the slightest bit of lag this cause these problems. I suggest putting a tiny extra space between showing each element (perhaps 10 or 50ms or so), or changing the items from a nested method to a sibling method. So, instead of this:</p> <pre><code><div class="body content"> <span class="first">500ms <span class="second">500ms <span class="third">500ms <span class="fourth">500ms</span> </span> </span> </span> </div> </code></pre> <p>Use this:</p> <pre><code><div class="body content"> <span class="first">500ms</span> <span class="second">500ms</span> <span class="third">500ms</span> <span class="fourth">500ms</span> </div> </code></pre> <p>So, instead of appending the spans to the current span, append it to the parent element <code>.body.content</code>. I would give you a demo, but your script looks really quite complicated (probably because it's generated by something), so you'll have to try doing that yourself. You could also try putting a tiny bit of extra space between each item's animation starts and see if that fixes it.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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