CSS - Effecten (Transitions)


Met CSS kun je eenvoudig een effect instellen in het geval dat een bezoeker met de muis over een bepaald element gaat. Zo stel je bijvoorbeeld in dat een bepaald element uitklapt zodra je hier met de muis op gaat staan. Let wel op dat deze animaties alleen werken in Google Chrome, Firefox, Opera, Safari en als laatste in Internet Explorer 10 of hoger.

De volledige code zie je hieronder. Je stelt als eerste de eigenschappen in van het element zoals je normaal zou doen plus de ':hover'. De rest wordt hieronder uitgelegd.

div.sample {
        width:100px;
        height:100px;
        background-color:#FF6600;

        transition-property:all;
        transition-duration:2s;
        transition-timing-function:ease;
        transition-delay:0s;
}

div.sample:hover {
        width:493px;
        height:200px;
        background-color:#000;
}

  • transition-property

    Met transition-property op de eerste regel bepaal je waar het effect op toegepast moet worden. In het voorbeeld staat dit ingesteld op 'all' waardoor het effect op alles wat wijzigt met de mouse-over zal worden toegepast. Je kunt echter ook bijvoorbeeld width invoeren zodat alleen het verbreden van het element voorzien zal worden van het effect.

  • transition-duration

    Hiermee stel je de duur van het effect in, in dit geval twee seconden.

  • transition-timing-function

    Hiermee geef je aan hoe de voortgang van het effect eruit ziet. Standaard ingsteld op ease, een langzame start, daar snel met een langzaam einde. Hier kan ook linear ingevuld worden wat zorgt voor een constante snelheid van begin tot het eind. Met ease-in heb je een langzame start, met ease-out heb je een langzaam eind van de animatie.

  • transition-delay

    Met transition-delay stel je een vertraging in.

Alle eigenschappen worden twee keer genoemd. Het tweede blok is een kopie van het eerste blok met als verschil dat er -webkit- voor wordt geplaatst speciaal voor Safari. Hieronder zie je een voorbeeld, ga met je muis op het blok staan om het effect te zien.

Korte notatie

Het effect hierboven wordt beschreven over vier regels. Dit kan echter ook korter worden geschreven en dat gaat op de onderstaande manier door transition-property, transition-duration, transition-timing-function en transition-delay achter elkaar te plaatsen.

transition:all 2s ease 0s;