web2 logo

CSS Animaties

Met CSS3 animaties zijn JavaScript of Flash niet meer nodig om elementen te laten "leven".

@keyframes

Een css animatie laat een element geleidelijk veranderen van de ene stijl naar de andere, die stijlen moet je definieren als keyframes. Keyframes bevatten de stijlen die een element zal hebben op bepaalde tijden. Keyframes zijn dus eigenlijk het script van de animatie.
Keyframes krijgen een naam die je bij het te animeren element opgeeft als animation-name.
Een eenvoudig voorbeeld:
/* Het animatie "script" */
@keyframes naam_van_de_animatie {
   from {background-color: red;}
   to {background-color: yellow;}
}

/* Dit element wordt geanimeerd: */
div {
   width: 150px;
   height: 150px;
   background-color: red;
   animation-name: naam_van_de_animatie;
   animation-duration: 5s;
}

animation-duration

De tijsduur van de animatie kan via animation-duration worden opgegeven in seconden of milliseconden. Deze duur bepaald hoeveel tijd er gebruikt wordt om de animatie 1 keer af te spelen. De default animation-duration is 0, dus als je deze niet opgeeft, gebeurt er helemaal niets.

Meer dan 2 stijlen in een animatie

In plaats van "from" en "to" kun je ook percentages opgeven, waardoor je meer als 2 stijlen kunt gebruiken.
Voorbeeld met percentages:
/* Het animatie "script" */
@keyframes naam_van_de_animatie {
   0% {background-color: red;}
   25% {background-color: yellow;}
   50% {background-color: blue;}
   100% {background-color: green;}
}

/* Dit element wordt geanimeerd: */
div {
   width: 150px;
   height: 150px;
   background-color: red;
   animation-name: naam_van_de_animatie;
   animation-duration: 5s;
}

animation-fill-mode

De stijl voor een element dat nog niet of niet meer geanimeerd wordt kun je opgeven via animation-fill-mode. De mogelijkheden zijn none (default), forwards, backwards, both, initial en inherit.
Standaard zal een animatie de stijl van een element niet aanpassen voordat of nadat het geanimeerd is. Met animation-fill-mode kan dit veranderen.
Met backwards zal het element voordat de animatie begint al de stijl van het eerst keyframe (0%) krijgen.
Met forwards zal het element na afloop van de animatie de stijl van het laatste keyframe (100%) behouden.
Met both zullen zowel de regels voor backwards als voor forwards gebruikt worden, dus voordat de animatie begint zal de stijl van het eerste keyframe (0%) gebruikt worden en nadat de animatie is afgelopen zal het element de stijl van het laatste keyframe (100%) krijgen.
Met initial krijgt het de oorspronkelijke ingestelde waarde.
Met inherit erft het de waarde van het ouder (parent) element.

animation-delay

Een animatie hoeft niet meteen te starten, je kunt de start uitstellen met animation-delay:
div {
   width: 150px;
   height: 150px;
   position: relative;
   background-color: red;
   animation-name: naam_van_de_animatie;
   animation-duration: 5s;
   animation-delay: 2s;
}

animation-iteration-count

Je kunt ook opgeven hoe vaak een animatie herhaald dient te worden:
div {
   width: 150px;
   height: 150px;
   position: relative;
   background-color: red;
   animation-name: naam_van_de_animatie;
   animation-duration: 5s;
   animation-iteration-count: 3;
}
Indien de animatie oneindig herhaald moet worden kun je infinite gebruiken:
animation-iteration-count: infinite;
De defaultwaarde voor animation-iteration-count is 1.

animation-direction

De richting van de animatie geef je aan met animation-direction. De mogelijkheden zijn normal (default),
reverse (van 100% naar 0%),
alternate (van 0% naar 100% en dan van 100% naar 0%) en
alternate-reverse (van 100% naar 0% en dan van 0% naar 100%).
Voorbeeld:
animation-direction: reverse;

animation-timing-function

De snelheidsvariatie geef je aan met animation-timing-function. De volgende waarden zijn mogelijk:
ease - langzaam-snel-langzaam (default)
linear - gelijke snelheid van begin tot eind
ease-in - langzame start
ease-out - langzaam einde
ease-in-out - langzame start en einde
cubic-bezier(n,n,n,n) - hiermee kun je je eigen waarden bepalen in een cubic-bezier functie
De cubic-bezier kan bijvoorbeeld gebruikt worden wanneer je een stuiterende bal wilt maken die sneller naar beneden gaat als naar boven.

animation-play-state

Of een animatie draait of gepauzeerd is wordt bepaald met animation-play-state. De mogelijkheden zijn running en paused. Dit kan bijvoorbeeld gebruikt worden samen met :hover om een animatie tijdelijk te stoppen.

Kompacte schijfwijze via animation

In plaats van dit:
div {
   animation-name: naam_van_de_animatie;
   animation-duration: 5s;
   animation-timing-function: linear;
   animation-delay: 3s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}
kun je ook dit gebruiken:
div {
   animation: naam_van_de_animatie 5s linear 3s infinite alternate;
}
Je kunt ook meerdere animaties tegelijk gebruiken:
.div {
animation: animatie_A 2s, animatie_B 1.75s;
}

Toegevoegd door: Kees de Keijzer
Twitter: @kdkq

~ css ~

~ Onderwerpen ~

Dit is een website zonder pop-ups

~ Links ~

Design & Development by Cyberwebdesign.nl for web2.nl © 2020.