JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<p><em>Hover each of these</em></p>

<p>Transition working in FF 28.0:</p>

<p><code>div</code></p>
<div>
    <span>Transition opacity</span>
</div>

<p><code>div.with-overflow-auto</code></p>
<div class="with-overflow-auto">
    <span>Transition opacity</span>
</div>

<p><code>div.with-before</code></p>
<div class="with-before">
    <span>Transition opacity</span>
</div>

<hr>

<p>Transition broken in FF 28.0:</p>
    
<p><code>div.with-overflow-auto.with-before</code></p>
<div class="with-overflow-auto with-before">
    <span>Transition opacity</span>
</div>

CSS

div {
    background: #eee
}

div.with-overflow-auto {
    overflow: auto
}

div.with-before:before {
    content: ":before"
}

span {
    opacity: 0;
    transition: opacity 1200ms
}

div:hover span {
    opacity: 1
}