Typically, when dealing with experimental features (especially if you're unsure about them), it's important to check whether they are supported by the browser you are using. Since transitions may not be fully supported by all major browsers, adding prefixes for those that do not yet fully support them is necessary. According to information from MDN's Browser support list and Statcounter's browser usage stats, you should include the following:
.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;
}
Since Firefox does not require a prefix and webkit browsers have widespread support without a prefix as well, this setup should work correctly. If you are experiencing issues, it may be due to running an outdated version of Firefox. It's recommended to ensure your browser is up-to-date, especially when testing website compatibility across different browsers. Firefox has supported transition syntax without the -moz- prefix since version 16 and is currently at version 26.
If you wish to support older browsers that are less commonly used and require prefixes, like Firefox versions prior to 16, consider adding the -moz- prefix as suggested. However, the -ms- prefix is unnecessary since all IE versions supporting transitions also support them without the need for this prefix.
Editorial Note: Include the -webkit- prefix for default Android/Blackberry browsers by referring to Can I use.
Additional Information (after reviewing added dropbox link)
The issue seen with the dropbox link could potentially be attributed to Firefox continuing to animate the initial element when the subsequent one appears, failing to restart the animation properly.
This inconsistency may occur due to slight lag in Firefox causing the second item's animation to begin from the starting point of the first row's animation. Nested items can inherit animations from parent elements, resulting in unexpected behavior. To address this, consider inserting a minor delay between displaying each element or restructuring the items from nested to sibling elements. For example:
<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>
Instead of appending spans within one another, append them to the parent element .body.content. While providing a sample would aid understanding, the complexity of your script suggests it may be auto-generated. Attempt making these adjustments manually or introduce subtle gaps between animations to mitigate the issue.