Deel 6: The power of design

Transities en animaties

Transitions

Met CSS transition kan je een vloeiende overgang verkrijgen tussen twee states

Transitions

.box {
  background-color: mint;
  border-radus: 2rem;
}

.box:hover {
  background-color: blue;
  border-radius: 0;
}

Een veel voorkomende state is de hover-state. Daarbij kan je instellen dat bepaalde properties een andere waarde krijgen wanneer een gebruiker met de muis hierover beweegt.

Visueel gebeurt deze overgang abrupt.

Transitions

.box {
  background-color: mint;
  border-radus: 2rem;
  transition: all 0.2s ease;
}

.box:hover {
  background-color: blue;
  border-radius: 0;
}

Door een transitie toe te voegen krijgen we een animatie als overgang tussen de twee states.

Transitions

Met transities kan je overgangen toevoegen op de meeste CSS-properties, al zijn er enkele uitzonderingen:

Wel: width, height, color, font-size, background-color...
Niet: display, flex, font-family, background-image...

Transitions

We kunnen heel wat instellen rond de transitie. Er zijn vier properties die bepalen hoe je transitie verloopt:

transition-property
transition-duration
transition-timing-function
transition-delay

Transition-property

Wat wil je laten animeren van het geselecteerde element?
bijv: color, background-color, width, height...

.box {
  background-color: mint;
  border-radus: 2rem;
  transition-property: background-color;
}

.box:hover {
  background-color: blue;
  border-radius: 0;
}

Transition-property

Je kan meerdere properties tegelijk animeren door ze te onderscheiden met een komma.

.box {
  background-color: mint;
  border-radus: 2rem;
  transition-property: background-color, border-radius;
}

.box:hover {
  background-color: blue;
  border-radius: 0;
}

Transition-property

Wil je alle properties van een element animeren? Dan kan je ook de aanspreking all gebruiken.

.box {
  background-color: mint;
  border-radus: 2rem;
  transition-property: all;
}

.box:hover {
  background-color: blue;
  border-radius: 0;
}

Transition-property

Transition-duration

Hoe lang moet de overgang duren tussen de twee states?

.box {
  background-color: mint;
  border-radus: 2rem;

  transition-property: background-color, border-radius;
  transition-duration: 0.2s;
}

.box:hover {
  background-color: blue;
  border-radius: 0;
}

Een duration boven de 0.5s à 1s voelt meestal al te traag aan

🤓 Tip

Transition-duration

Transition-timing-function

Hoe bouwt de animatie zich op?

.box {
  background-color: mint;
  border-radus: 2rem;

  transition-property: background-color, border-radius;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

.box:hover {
  background-color: blue;
  border-radius: 0;
}

Transition-timing-function

Easing bepaalt of de animatie lineair verloopt of niet

Bekijk voorbeelden van easing op easing.net

🤓 Tip

Transition-timing-function

Als je meer kennis hebt van easing en bézier curves, kan je ook je eigen verloop aanmaken

.box {
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

Transition-timing-function

Transition-delay

In sommige gevallen kan het zijn dat je de animatie iets later wil laten starten.

.box {
  background-color: mint;
  border-radus: 2rem;

  transition-property: background-color, border-radius;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transiton-delay: 0.5s;
}

.box:hover {
  background-color: blue;
  border-radius: 0;
}

Transition

Al de transition-properties kan je combineren in één property

.box {
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transiton-delay: 0.5s;
}

.box {
  transition: background-color 0.2s ease 0.5s;
}

Transition

Meerdere animaties kan je scheiden door een komma

.box {
  transition:
    opacity 0.3s ease 0.2s,
    background-color 0.4s linear 0s,
    transform 0.6s ease-in-out 0.1s;
}

Transforms

CSS Transforms maken het mogelijk om elementen te verplaatsen, roteren, schalen en vervormen zonder de layout te beïnvloeden.

Transforms

Één van de grootste voordelen van transform is dat de transform geen invloed heeft op de ruimte die door het element opgeëist wordt. Daarom zijn ze perfect voor animaties

Transforms

De transform-property kan je de volgende zaken meegeven:

Translate
Rotate
Scale
Skew

transform: translate

.my-element:hover {
  transform: translateY(2rem);
}

Met translate verplaats je een element

translate(x-value, y-value);
translateX(value);
translateY(value);
translateZ(value);

transform: translate

transform: rotate

.element {
    transform: rotate(45deg);    /* 45 graden rechtsom */
    transform: rotate(-90deg);   /* 90 graden linksom */
}

Met rotate laat je een element draaien

rotate(value);
rotateX(value);
rotateY(value);
rotateZ(value);

transform: rotate

transform: scale

.element {
    transform: scale(1.5);      /* 150% groter */
    transform: scale(0.8);      /* 80% kleiner */
    transform: scaleX(2);       /* Dubbel zo breed */
    transform: scaleY(0.5);     /* Half zo hoog */
}

Met scale pas je de verhoudingen aan

scale(value);
scaleX(value);
scaleY(value);
scaleZ(value);

transform: scale

transform: skew

.element {
    transform: skew(15deg, 5deg);/* Horizontaal en verticaal scheef */
    transform: skewX(20deg);     /* Alleen horizontaal scheef */
}

Met skew kan je een element "scheeftrekken"

skew(x-value, y-value);
skewX(value);
skewY(value);

transform: skew

Transform

Je kan meerdere transform instellingen ook combineren met de transform-property. Let daarbij op de volgorde:

[translate] [rotate] [scale] [skew]

.combined {
    transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}

Transform

transform-origin

Met transform-origin kan je aan de browser laten weten vanuit welk punt je het element wilt laten transformeren

.element {
    transform-origin: center;       /* Standaard */
    transform-origin: top left;     /* Draai vanaf hoek */
    transform-origin: bottom;       /* Draai vanaf onderkant */
}

transform-origin

Animations

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 zijn de stappen die bepalen hoe een animatie verloopt tussen begin en eindpunt.

Ze beschrijven welke stijlen het element op bepaalde momenten van de animatie moet hebben.

Keyframes

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

Je kan werken met een startpunt (from) en eindpunt (to)

Keyframes

@keyframes slideInBounce {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    
    60% {
        opacity: 1;
        transform: translateX(20px);
    }
    
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

Of je definieert meerdere stappen met percentages

animation-name

Eerst definieer je

keyframes en geef je de animatie een naam, daarna kan je die aanspreken in een selector met animation-name

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    70% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.2);
    }
    
    80% {
        transform: scale(1);
    }
    
    85% {
        transform: scale(1.2);
    }
    
    90% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

.my-selector {
    animation-name: heartbeat;
    animation-duration: 4s;
}

animation-duration

Hiermee bepaal je 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-fucntion

Hiermee voeg je easing toe

.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);
}

animation-delay

Hiermee kan je de animatie later laten starten

.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 hoevaak de animatie afgespeeld 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

Bepaalt 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 worden toegepast na de animatie

.element {
    animation-fill-mode: none;      /* Default: 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 */
}

animation

Met de animation shorthand kan je al deze properties combineren. Let daarbij op de volgorde:

[name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode]

.element {
    animation: slideIn 0.5s ease-out 0.2s 1 normal forwards;
    
    /* 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;
}

15. Transities en animaties

15. Transities en animaties

Lecturer GDM PRO

15. Transities en animaties

More from Lecturer GDM