CSS3 transition: [property] - avanceret

Når man først kommer i gang med transitions begynder man pludseligt at kunne se en masse fordele og henseender man kan bruge denne.
Det er lækkert og nemt, men samtidigt skal man passe på ikke at overfylde sin side.
Men fordi man ofte gerne vil udvide det man allerede har så vil jeg også vise et eksempel på dette.

Se første indledning til transition her.

Jeg vil tage udgangspunkt i ovenstående eksempel med:

• en div
• en span
• et billede

Det jeg vil udvide med er at man bruger flere transitions på samme element, i modsætning til forrige eksempel hvor det kun blev sat på et enkelt property.
 Jeg vil nu lave et eksempel på at border-på div'en skifter farve, baggrunden samtidigt med at span'en fader ind og selvfølgelig skal den reverse når man fjerner musen.

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;
        border: 2px solid #B8D30B;
        -webkit-transition:border-color 1s linear, background-color 1s linear;
        -moz-transition: border-color 1s linear, background-color 1s linear;
        -o-transition:border-color 1s linear, background-color 1s linear;
        transition:border-color 1s linear, background-color 1s linear;
        background-color: white;
    }
   
    .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
    {
        -webkit-transition:border-color 1s linear, background-color 1s linear;
        -moz-transition: border-color 1s linear, background-color 1s linear;
        -o-transition:border-color 1s linear, background-color 1s linear;
        transition:border-color 1s linear, background-color 1s linear;
        -moz-transition: border-color 1s linear, background-color 1s linear;
        border-color: rgb(170,280,10);
        background-color: black;
    }
   
    .outerDiv:hover .innerSpan
    {
        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;
    }

Det første jeg udvider med er at lave borderen til at den også skifter farve. Derfor skal der laves en :hover-state på "outerDiv". Jeg starter med at definere de forskellige transition med browser specifikke pre-fix'es. Derefter tilføjer jeg "border-color 1s linear" i ".outerDiv:hover". Selvfølgelig tilføjer jeg også en anden border-color. Dette gør at når jeg peger på outerDiv så skifter den langsomt i en transition farve, men så snart jeg fjerner musen så skifter den med det samme farve til standart farven defineret i ".outerDiv".
Derfor tilføjer jeg det samme som før oppe til ".outerDiv" netop fordi dette gør at den får den modsatte transition tilbage til sin originale border-color.

Dette eksempel er blot en tilføjelse til en anden property og element så dette ligner meget mit første eksempel på transition: opacity, så derfor skal det udvides.
Derfor vil jeg gerne have en ekstra property tilføjet til "outerDiv". Dette valgte jeg så at det skulle være background-color for at have to properties sat på samme element.

Derfor udvider jeg med at background-color skal blive sort.
Og fordi denne også skal have en transition, så skal hver transition-property inden i ".outerDiv:hover" udvides med ", background-color [x]s linear".
Dette gør at når du hover den (peger på den) så ændres (transition) baggrunden til sort.
Men igen så så snart at du fjerner musen fra div'en så skifter den med det samme til den oprindelige background-color fordi der ikke er nogen overgang eller transition på ".outerDiv".
Så samme trick skal laves på denne klasse for at det fungerer.

Slutresultatet er en kat med en border rundt om, og når man peger på den ændres border-color og background color, og så kommer en span med en tekst til syne.