web/08

Transities en animaties

vloeiende overgangen en beweging met css

Transitions

CSS transitions laat je toe om een element te laten animeren tussen 2 staten

Transitions

Een status van een element verandert meestal na een interactie met een gebruiker.

Eén van de meest voorkomende is :hover

a {
  background: green;
}

/* Wanneer een gebruiker over een element hovert */
a:hover {
  background: blue;
}

Transitions

De browser zal nu de link blauw kleuren

wanneer je er met je muis over zweeft.

de link zal van een groene

naar blauwe achtergrond springen

link

Transitions

Met de transition gaat deze overgang smoother

a {
  background: green;
  transition: background 0.2s ease;
}

a:hover {
  background: blue;
}

link

De tekstkleur zal nu over een periode van 0,2 seconden een transitie hebben van groen naar blauw

link

Transitions

Met CSS Transitions kan je nagenoeg elke CSS-property laten animeren waarbij er

waardes te berekenen zijn tussenin.

Wel: width, height, color, font-size, background-position...

Niet: text-decoration, display, background-image.

Transitions

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

Transitions

CSS transition-property: Welke property wil je laten animeren van het geselecteerde element?

.selector {
  transition-property: color;
}

Transitions

CSS transition-duration: Hoe lang moet de transitie duren op het geselecteerde element?

.selector {
  transition-duration: 0.2s;
}

Transitions

CSS Transition-timing-function: Hoe bouwt de transitie zichzelf op?

.selector {
  transition-timing-function: ease;
}

Transitions

CSS Transition-timing-function: Hoe bouwt de transitie zichzelf op?

Transitions

CSS Transition-timing-function:

https://cubic-bezier.com/

Transitions

[color]: Welke property wil je laten animeren?

[0.2s]: Hoe lang moet de transitie duren?

[ease]: Hoe bouwt de transitie zichzelf op?

.selector {
  transition: color 0.2s ease;
}

Oefening @Campus

Simple hover effects

Mr. Bean

Transitions

Transition timing: Je kan heel ver gaan

met de transition timings.

Neem een kijkje op cubic-bezier.com

.selector {
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

Tip:

Probeer aan micro-interacties te doen:

Een éénmalige animaties bij hover, of bij transitie hou je best onder de 0.4s want een gebruiker wacht niet graag.

.selector {
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

Tip:

Transition-delay: Er zijn use-cases voor wanneer je een animatie pas wilt laten starten na een seconde bijvoorbeeld.

.selector {
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1); 
  transition-delay: 1s;
}

Tip:

Voelt je transitie niet goed aan?

Er zijn veel manieren om een transitie goed te doen aanvoelen.

Neem dan zeker een kijkje op:

Google Material Design Speed guidelines

Transforms

Smoothness: veel properties waar je een transitie op zou willen zien zullen een janky animation teweegbrengen.

Bijvoorbeeld: wanneer je een element plots een margin-top geeft, dan moet ieder ander element ook meer naar onder schuiven.

Transforms

Transform property is hier een oplossing voor.

/* janky animation */
.my-element:hover {
  margin-top: 2rem;
}

/* smooth animation */
.my-element:hover {
  transform: translateY(2rem);
}

Transform

Met de transform property kan je super veel aanvangen: translateX(), translateY(), scaleX(), scaleY(), rotate(), skew(), perspective(), ...

Transform

1 van de grootste voordelen van transform is dat de transform geen invloed heeft op de ruimte die door het element opgeëist wordt.

Transform

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

Transforms

Browsers kunnen niet al hun elementen in 1 keer smooth laten animeren, daarom gaan we een onzichtbare extra laag gebruiken binnen CSS:

Transforms

Daarom gaan we een onzichtbare extra laag gebruiken binnen CSS:

Transform

De transform property maakt een nieuwe laag waarbinnen een browser kan animeren

.element-a {
  transition: all 0.2s ease;
  transform: translateX(1rem);
}

Opdracht @home

Complex hover effects

FAB Menu

Tip

Meer weten over smooth animaties?

- CSS GPU animation (Smashing Magazine)

- Wanneer animaties gebruiken (CSS-tricks)

- Achieving 60fps met CSS animation

Animations

Transform en transition properties worden vaak gebruikt om een éénmalige overgang tussen 2 verschillende statussen te maken.

Animations zijn overgangen die in een lus herhaald worden.

Animations

Eerst definieer je

keyframes, daarna kan je die aanspreken in een selector.

@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;
}

Animations

animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode

Animations

Keyframes kan je zelf uitschrijven, en kan je zeer leuke dingen mee doen.

Zoek je inspiratie? Er bestaat een animate.css library waar je uit mag kopieren. CSS kan je hier inkijken

Oefening @Campus

Bouncing heart

Bolletjes

DigExp - WEB/08 - Transitions & Animations

DigExp - WEB/08 - Transitions & Animations

Frederick Roegiers

DigExp - WEB/08 - Transitions & Animations

More from Frederick Roegiers