Articles
Introductie tot CSS
CSS-eigenschappen met betrekking tot animatie

CSS-eigenschappen met betrekking tot animatie

Dit artikel legt uit welke CSS-eigenschappen met animaties te maken hebben.

Je kunt leren over het gebruik en de syntax van de eigenschappen @keyframes, animation en transition.

YouTube Video

HTML voor Voorbeeldweergave

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Animatie & Overgang

De regel @keyframes 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes wordt in CSS-animaties gebruikt om te specificeren hoe stijlen veranderen tijdens de animatie. In @keyframes worden de stijlveranderingen van het begin tot het einde van de animatie gespecificeerd door middel van tijdpercentages of trefwoorden (from en to).

  • Dit is een voorbeeld van een animatie waarbij een element van links naar rechts schuift en terugkeert naar zijn oorspronkelijke positie.
  • In dit voorbeeld staat slide na @keyframes, waarmee een animatie genaamd slide wordt gedefinieerd.
  • 0% is het begin van de animatie, waarbij translateX(0) het element op zijn oorspronkelijke locatie plaatst.
  • 50% is halverwege de animatie, waarbij het element 200px naar rechts verschuift met behulp van translateX(200px).
  • 100% is het einde van de animatie, waarbij het element terugkeert naar zijn oorspronkelijke positie.
  • In de klasse box-animation-slide wordt de eigenschap animation gebruikt om de slide-animatie toe te passen met intervallen van 3 seconden.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Je kunt de stijlen tijdens een animatie nauwkeurig regelen. Door percentages te specificeren, kun je verschillende stijlen toepassen op willekeurige momenten.
    • In dit voorbeeld verandert de kleur geleidelijk van rood naar blauw naar groen naar geel en weer terug naar rood.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • In dit voorbeeld is from gelijk aan 0% en to gelijk aan 100%. Hiermee kun je eenvoudige animaties definiëren.

Basis Syntax 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: De naam van de animatie. Dit wordt gespecificeerd met behulp van de eigenschap animation of de eigenschap animation-name.
  • Percentage of sleutelwoorden: Gebruik percentages van 0% tot 100%, of de sleutelwoorden from (gelijk aan 0%) en to (gelijk aan 100%).

De eigenschap animation 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

De eigenschap animation wordt gebruikt om animaties op een element toe te passen. Animaties bepalen hoe een reeks CSS-stijlen in de loop van de tijd verandert. Met de eigenschap animation kun je de timing, het gedrag, de vertraging, het aantal herhalingen en meer van een animatie regelen.

  • De klasse box-animation-ease-in-out specificeert slide als de animation-name, en gebruikt de animatie slide die is gedefinieerd in @keyframes.
    • 3s is de animation-duration, wat betekent dat elke animatiecyclus binnen 3 seconden wordt voltooid.
    • ease-in-out is de animation-timing-function, waardoor de animatie langzaam begint, versnelt en vervolgens weer vertraagt aan het einde.
    • infinite is het animation-iteration-count, wat betekent dat de animatie oneindig vaak wordt herhaald.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • De klasse box-animation-alternate specificeert color-change als de animation-name, en gebruikt de animatie color-change die is gedefinieerd in @keyframes.
    • De 1s na ease-in-out is de animation-delay, die de vertraging specificeert voordat de animatie begint. De animatie start 1 seconde later.
    • De 3 na 1s is het animation-iteration-count, wat betekent dat de animatie 3 keer wordt herhaald.
    • alternate is de animation-direction, waarmee de richting van het afspelen van de animatie wordt gespecificeerd. De alternate specificeert dat de animatie afwisselend wordt afgespeeld.

Samenstelling van de eigenschap animation

De eigenschap animation is een afkortingseigenschap die meerdere subeigenschappen combineert in één. Hier zijn de belangrijkste subeigenschappen:.

  • animation-name eigenschap: Specificeert de naam van de animatie die moet worden toegepast. Deze moet overeenkomen met de naam van de animatie die is gedefinieerd in @keyframes.
  • animation-duration eigenschap: Specificeert de tijd die nodig is om één cyclus van de animatie te voltooien. De tijdseenheden zijn seconden (s) of milliseconden (ms).
  • animation-timing-function eigenschap: Specificeert de snelheidskromme van de animatie. Waarden zoals ease, linear, ease-in, ease-out, ease-in-out, enz. worden gebruikt.
    • Met ease begint de animatie langzaam, versnelt deze en vertraagt vervolgens weer aan het einde.
    • Met linear verloopt de animatie met een constante snelheid van begin tot eind.
    • Het specificeren van ease-in laat de animatie langzaam beginnen en snel eindigen.
    • Het specificeren van ease-out laat de animatie snel beginnen en langzaam eindigen.
    • Het specificeren van ease-in-out laat de animatie langzaam beginnen, snel verlopen en langzaam eindigen.
  • De eigenschap animation-delay specificeert de vertraging voordat de animatie begint. De tijdeenheid is of seconden of milliseconden.
  • De eigenschap animation-iteration-count specificeert het aantal keer dat de animatie moet worden herhaald. Het specificeren van infinite zal de animatie oneindig herhalen.
  • De eigenschap animation-direction specificeert de afspeelrichting van de animatie. Opties omvatten normal (voorwaartse richting), reverse (achterwaartse richting), alternate (afwisselend afspelen) en alternate-reverse (afwisselend afspelen beginnend in achterwaartse richting).
  • De eigenschap animation-fill-mode specificeert de toestand van de animatie voordat deze begint en nadat deze is geëindigd. Je kunt none, forwards, backwards of both specificeren.
  • De eigenschap animation-play-state specificeert of de animatie actief is of gepauzeerd. Je kunt running of paused specificeren.

Samenvatting

De eigenschap animation is een krachtig hulpmiddel om de stijl van elementen dynamisch te wijzigen. Met behulp van @keyframes kun je definiëren hoe stijlen in de loop van de tijd veranderen en het gedetailleerde gedrag van de animatie beheren met elke sub-eigenschap van animation.

transition-eigenschap 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

De eigenschap transition wordt gebruikt om animatie-effecten toe te passen op CSS-stijlwijzigingen. Hiermee kunnen wijzigingen soepel verschijnen tijdens toestandwijzigingen zoals hover, focus, active, of wanneer stijlen dynamisch worden gewijzigd door JavaScript.

Laten we een voorbeeld bekijken van de transition-box-klasse waarin de achtergrondkleur soepel verandert bij het zweven boven een knop. - In de transition-box-klasse past de eigenschap transition een overgang van 2 seconden toe op de achtergrondkleurwijziging. De wijziging is gespecificeerd als ease, waardoor het soepel verloopt. - De pseudo-klasse hover verandert de achtergrondkleur van lightgray naar steelblue wanneer de muis over de knop beweegt. Deze wijziging verloopt soepel over de 2 seconden die in de transition-box-klasse zijn gespecificeerd.

Het is mogelijk om transition tegelijkertijd op meerdere eigenschappen toe te passen. - In het voorbeeld van de transition-2-properties-klasse verandert de achtergrondkleur in 5 seconden en de breedte in 0,5 seconden.

Basis Syntax 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • De property geeft aan op welke CSS-eigenschappen de animatie moet worden toegepast. Het specificeren van all past de animatie toe op alle eigenschappen.
  • De duration specificeert de tijd die nodig is om de animatie te voltooien. Specificeer met seconden (s) of milliseconden (ms).
  • De timing-function specificeert de snelheidsverandering van de animatie. Je kunt opties gebruiken zoals ease, linear, ease-in, ease-out, ease-in-out, etc.
  • De delay specificeert de wachttijd voordat de animatie start. Specificeer in seconden of milliseconden.

Gedetailleerde eigenschappen van transition 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

De transition kan ook als afzonderlijke eigenschappen worden gebruikt, zoals volgt.

  • transition-property: Geeft aan op welke eigenschap de animatie wordt toegepast.
  • transition-duration: Specificeert de duur totdat de animatie is voltooid.
  • transition-timing-function: Specificeert de voortgangssnelheid van de animatie. Opties zoals ease, linear, ease-in, ease-out, ease-in-out kunnen worden gebruikt.
  • transition-delay: Specificeert de wachttijd voordat de animatie begint.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

CSS-eigenschappen met betrekking tot filtereffectenCSS-eigenschappen met betrekking tot 3D-animatie