CSS: animaties

CSS Animations maken het mogelijk om complexe, meerlagige animaties te creëren. In tegenstelling tot transitions, die enkel tussen twee toestanden kunnen animeren, kunnen animations meerdere keyframes hebben en automatisch starten zonder trigger.

Keyframes

Keyframes definiëren de verschillende stappen van een animatie:

/* Basis keyframes syntaxis */
@keyframes animationName {
    from {
        /* Start toestand */
        opacity: 0;
        transform: translateY(50px);
    }
    
    to {
        /* Eind toestand */
        opacity: 1;
        transform: translateY(0);
    }
}

/* Met percentages voor meer controle */
@keyframes slideInBounce {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    
    60% {
        opacity: 1;
        transform: translateX(20px);
    }
    
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

Animation

Animation Properties

animation-name

Verwijst naar de keyframes:

.element {
    animation-name: slideInBounce;
    /* Of meerdere animaties */
    animation-name: slideIn, fadeIn;
    /* Geen animatie */
    animation-name: none;
}

animation-duration

Bepaalt hoe lang de animatie duurt:

.element {
    animation-duration: 1s;        /* 1 seconde */
    animation-duration: 500ms;     /* 500 milliseconden */
    animation-duration: 2.5s;      /* 2.5 seconden */
    
    /* Verschillende duraties voor meerdere animaties */
    animation-duration: 1s, 0.5s;
}

animation-timing-function

Controleert de snelheid curve:

.element {
    /* Basis easing functions */
    animation-timing-function: ease;        /* Standaard */
    animation-timing-function: linear;      /* Constante snelheid */
    animation-timing-function: ease-in;     /* Accelereren */
    animation-timing-function: ease-out;    /* Vertragen */
    animation-timing-function: ease-in-out; /* Beide */
    
    /* Custom cubic-bezier */
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Steps voor frame-by-frame animaties */
    animation-timing-function: steps(8, end);
    animation-timing-function: step-start;
    animation-timing-function: step-end;
}

animation-delay

Vertraagt de start van de animatie:

.element {
    animation-delay: 0.5s;    /* Start na 0.5 seconden */
    animation-delay: -0.2s;   /* Start 0.2s in de animatie */
    
    /* Verschillende delays */
    animation-delay: 0s, 0.3s, 0.6s;
}

animation-iteration-count

Bepaalt hoe vaak de animatie herhaald wordt:

.element {
    animation-iteration-count: 1;        /* Eén keer (standaard) */
    animation-iteration-count: 3;        /* Drie keer */
    animation-iteration-count: infinite; /* Oneindig herhalen */
    animation-iteration-count: 2.5;      /* 2.5 keer */
}

animation-direction

Controleert de richting van de animatie:

.element {
    animation-direction: normal;          /* 0% naar 100% */
    animation-direction: reverse;         /* 100% naar 0% */
    animation-direction: alternate;       /* Heen en weer */
    animation-direction: alternate-reverse; /* Terug en heen */
}

animation-fill-mode

Bepaalt welke stijlen toegepast worden voor en na de animatie:

.element {
    animation-fill-mode: none;      /* Standaard: geen persistent styles */
    animation-fill-mode: forwards;  /* Behoud eindstijl */
    animation-fill-mode: backwards; /* Gebruik startstijl tijdens delay */
    animation-fill-mode: both;      /* Beide: backwards en forwards */
}

Shorthand syntax

.element {
    /* animation: name duration timing-function delay iteration-count direction fill-mode play-state */
    animation: slideIn 0.5s ease-out 0.2s 1 normal forwards running;
    
    /* Vereenvoudigd */
    animation: slideIn 0.5s ease-out forwards;
    
    /* Meerdere animaties */
    animation: 
        slideIn 0.5s ease-out forwards,
        fadeIn 0.3s linear 0.2s forwards,
        bounce 1s ease-in-out infinite;
}