transition: opacity - begge veje

Noget som jeg selv har undret mig over er at når man bruger transition på opacity så virker det på den ene vej men ikke den anden. Det kan være utroligt irriterende, men er faktisk ret så simpelt hvis man tænker over det.
Altså at den kan fade out og fade in når du hover et element - for ofte så virker fade in eller fade out, men når du så skal gå den modsatte vej virker det ikke. Det er der en meget simpel grund til som jeg vil forsøge at forklare nedenunder.

Hvis du ikke forstår det med at få teksten til at stå ovenpå billedet så læs mit andet indlæg omkring det her: Eksempel på tekst ovenpå billede

Et lille eksempel:
HTML:
<div class="outerDiv">
    <span class="innerSpan">Text goes here</span>
    <!-- de to parametre efter adressen angiver størrelsen -->
    <img src="http://placekitten.com/200/300" />
</div>

CSS:
.outerDiv
    {
        position: relative;
        display: inline-block;
    }
   
    .innerSpan
    {
        position: absolute;
        bottom: 20px;
        right: 0px;
        padding: 3px;
        padding-left: 10px;
        padding-right: 10px;
        color: #B8D30B;
        text-shadow: 0 0 2px lime;
        /* to ensure backward compability where rgba id not understood */
        background-color: whitesmoke;
        background-color: rgba(10, 10, 30, 0.4);
        visibility: hidden;
        opacity: 0;
        -webkit-transition:visibility 0s 1s, opacity 1s linear;
        -moz-transition: visibility 0s 1s, opacity 1s linear;
        -o-transition:visibility 0s 1s, opacity 1s linear;
        transition:visibility 0s 1s, opacity 1s linear;
    }
   
    .outerDiv:hover .innerSpan
    {
        /* Ovenstående  er en CSS selector der siger at når du har :hover på outerDiv skal dette gøre sig gældende for span-elementet indeni outerDiv */

        visibility: visible;
        opacity: 1;
        -webkit-transition:opacity 1s linear;
        -moz-transition: opacity 1s linear;
        -o-transition:opacity 1s linear;
        transition:opacity 1s linear;
        -moz-transition: opacity 1s linear;
    }

Dette eksempel viser at innerSpan har en transition, fordi dette gør at når du skal tilbage til denne fra en anden state - såsom :hover - så vil denne transition gøre sig gældende.
Det de fleste (inklusiv mig selv) gør er at kun sætte transition på starten du vil have skal ske, men ikke på "original"-elementet og dermed går den fra <class>:hover til <class> ved at skifte til <class>, og da denne ikke har en transition vil dette ske med det samme.
Så det vigtige i dette eksempel er at du har transition på både innerSpan (fade out) og transition på .outerDiv:hover .innerSpan (fade in).
".outerDiv:hover .innerSpan" giver at på din class "outerDiv" i staten "hover" skal css'en skrevet gøre sig gældende for elementer med class "innerSpan" sat, indeni "outerDiv"-elementet.
Du kunne sagtens erstatte ".innerSpan" med "span", men grunden til jeg bruger ".innerSpan" er at man måske ønsker flere span's indeni "outerDiv" og ønsker måske ikke at ovenstående effekt gør sig gældende for alle span-elementer indeni "outerDiv".

Ovenstående eksempel giver et billede af en kat, og når du har musen over (:hover) så bliver span'en indeni outerDiv langsomt synlig.