CSS - Animeren


Met behulp van CSS kun je relatief eenvoudig animaties maken. Elementen kun je standaard op deze manier een effect geven of je geeft juist een effect zodra iemand met de muis op een element gaat staan. Een voorbeeld van een simpele animatie zie je hieronder, in dit geval gaat het om slechts een afbeelding die constant aan het draaien is.

Let wel op dat deze animaties alleen werken in Google Chrome, Firefox, Opera, Safari en Internet Explorer 10 of hoger. De animaties werken niet in Internet Explorer 9 en lager.

Eigenschappen

Om een animatie te maken moeten er een aantal zaken ingesteld worden die specifiek gericht zijn op de animatie. Hieronder in de code zie je als eerste dat er een div wordt geplaatst met standaard eigenschappen als width, height en margin. De instellingen betreffende de animatie beginnen hieronder in de code met de regel animation-name.

div.sample-logo {
        width:250px;
        height:250px;
        background-image:url(images/logo_large.png);
        background-repeat:no-repeat;

        animation-name:animate;
        animation-duration:10s;
        animation-timing-function:linear;
        animation-delay:0s;
        animation-iteration-count:infinite;
        animation-direction:normal;

        -webkit-animation-name:animate;
        -webkit-animation-duration:10s;
        -webkit-animation-timing-function:linear;
        -webkit-animation-delay:0s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-direction:normal;
}

  • animation-name

    Je ziet als eerste de regel animation-name staan met als naam 'animate' en dit komt overeen met de naam van de daadwerkelijke animatie die hieronder wordt ingesteld.

  • animation-duration

    Met deze eigenschap stel je de duur van de animatie in, in dit geval 10 seconden.

  • animation-timing-function

    Hiermee geef je aan hoe de voortgang van de animatie 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.

  • animation-iteration-count

    Deze eigenschap is om in te stellen hoe vaak de animatie uitgevoerd moet worden.

  • animation-delay

    Hiermee kan een vertraging ingesteld worden, normaal niet van toepassing.

De bovenstaande eigenschappen zijn benodigd voor de animatie. Je ziet dat alle eigenschappen vervolgens nog een keer geplaatst zijn met als verschil dat er telkens -webkit- voor is geplaatst. Dit is benodigd voor de browsers Google Chrome en Safari.

Animatie

Echter met het instellen van de bovenstaande eigenschappen zal er nog niets animeren. Dit wordt aangegeven met @keyframes waarvan een voorbeeld hieronder. Net als met de eigenschappen hierboven is het benodigd om de animatie twee keer aan te geven (met -webkit-), dit is wederom voor Chrome en Safari en betreft een kopie van het eerste stuk.

Achter @keyframes staat de naam van de animatie die hierboven al was ingevuld achter animation-name. Daarna staat er wat er gedurende de 10 ingestelde seconden moet gebeuren wat in dit geval dus simpelweg het roteren van een afbeelding betreft. Middels de percentages geef je aan wanneer er wat moet gebeuren. Hieronder gedaan met 0%, 50% en 100% maar deze percentages kunnen uiteraard naar wens gewijzigd worden.

Alles bij 0% betreft de startpositie en 100% is hetgeen wat er uitgevoerd moet zijn aan het einde van de animatie. Let op dat een animatie uiteindelijk altijd terugkomt op het begin.

@keyframes animate {
        0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        }
        50% {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
        }
        100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        }
}

@-webkit-keyframes animate {
        0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        }
        50% {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
        }
        100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        }
}


From en to

Als alternatief kun je overigens ook in plaats van percentages from en to gebruiken.

from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
}
to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
}


Korte notatie

Het effect hierboven wordt beschreven over meerdere regels. Dit kan korter worden geschreven zoals hieronder door de eigenschappen achter elkaar op 1 regel te plaatsen.

animation:animate 10s linear 0s infinite normal;
-webkit-animation: animate 10s linear 0s infinite normal;


Volledige code

Hieronder zie je de volledige die gebruikt is voor het roteren van de afbeelding.

div.sample-logo {
        width:250px;
        height:250px;
        background-image:url(images/logo_large.png);
        background-repeat:no-repeat;

        animation-name:animate;
        animation-duration:10s;
        animation-timing-function:linear;
        animation-delay:0s;
        animation-iteration-count:infinite;
        animation-direction:normal;

        -webkit-animation-name:animate;
        -webkit-animation-duration:10s;
        -webkit-animation-timing-function:linear;
        -webkit-animation-delay:0s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-direction:normal;
}

@keyframes animate {
        0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        }
        50% {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
        }
        100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        }
}

@-webkit-keyframes animate {
        0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        }
        50% {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
        }
        100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        }
}