Vóór de komst van CSS3 zorgde het woord ‘animatie’ ervoor dat lay-outontwerpers het koude zweet uitbraken. En dat allemaal omdat in die tijd hoogwaardige en prachtige animatie er was geen triviale taak. CSS kon dit niet, dus werden alle animaties in JavaScript gedaan. Het was nodig om een ​​aantal forums te doorzoeken, dezelfde kameraden in tegenslag te vinden, veel tijd aan ontwikkeling te besteden en uiteindelijk van de ontwerper te horen: "Oké, dit is voldoende." En toen CSS3 eindelijk uitkwam, stopte het vuurwerk pas in de ochtend en vloeide de champagne als een rivier. Het was een geweldige dag voor alle webontwikkelaars (de volgende dag was de dag waarop Microsoft het einde van de ondersteuning aankondigde Internet Explorer). Met de komst van CSS3 zijn veel voorheen complexe taken eenvoudig en plezierig geworden om mee te werken. Hetzelfde geldt voor animaties in CSS, waar ik het in dit artikel over zal hebben.

CSS-overgangen

Met CSS-overgangen kunt u soepel en in de loop van de tijd wijzigingen aanbrengen in CSS-eigenschappen. Op deze manier krijgt u de mogelijkheid om het proces van de overgang van een element van de ene toestand naar de andere te controleren. Laten we beginnen met het eenvoudigste voorbeeld en verder gaan.

Wanneer u de cursor over het vierkant beweegt, verandert de achtergrondkleur vloeiend.

Laten we nu eens nader bekijken hoe u overgangen in CSS kunt beheren. We hebben slechts 5 eigenschappen waarmee we overgangsanimatie kunnen besturen:

• overgangseigendom;
• transitieduur;
• transitie-timing-functie;
• transitie-vertraging;
• overgang;

overgangseigendom- specificeert een lijst met eigenschappen die zullen worden geanimeerd; eigenschappen die hier niet zijn gespecificeerd, worden zoals gebruikelijk gewijzigd. U kunt alle eigenschappen animeren specifiek onderdeel, waarbij de waarde all wordt opgegeven. Als u geen eigenschappen opgeeft, is de standaardwaarde all.

Overgangseigenschap: breedte;

transitie-duur- stelt de duur van de animatie in, kan worden opgegeven in seconden of milliseconden.

Overgangsduur: 1s;

transitie-timing-functie- tijdfunctie, geeft punten van versnelling en vertraging aan bepaalde periode tijd om veranderingen in de animatiesnelheid te beheersen. Simpel gezegd kunt u deze eigenschap gebruiken om het gedrag van een animatie te specificeren. We kunnen de animatie bijvoorbeeld aan het begin versnellen en aan het einde vertragen, of omgekeerd. Bezier-curven worden gebruikt om het animatieproces te definiëren. Over het algemeen kun je met de transitie-timing-functie veel verschillende gedragingen voor animaties creëren, dit is een heel onderwerp voor een artikel, dus we zullen hier niet dieper op ingaan.

Overgangtimingfunctie: kubieke-bezier(0, 0, 1, 1);

transitie-vertraging- stelt de tijdsvertraging in vóór het begin van de animatie, kan worden opgegeven in seconden of milliseconden.

Overgangsvertraging: 500 ms;

overgang- Dit algemeen bezit, waarmee u de eerste vier eigenschappen in volgorde kunt weergeven: eigenschap, duur, timingfunctie, vertraging.

Overgang: achtergrondkleur 1s kubieke-bezier(0, 0, 1, 1) 500ms;

Dit is wat we hebben gekregen eenvoudige animatie: wanneer u met de muis over het vierkant beweegt, verandert de breedte; animatieduur is één seconde; de animatie wordt afgespeeld volgens een lineaire functie; vertraging voordat de animatie begint 500 milliseconden.

MET met behulp van CSS transities kunnen bijna alle eigenschappen animeren en vele interessante, mooie, functionele en zelfs complexe animaties creëren die uw project zullen aanvullen en verbeteren. Ik maakte er bijvoorbeeld deze Material-FAB ​​op pure CSS overgangen gebruiken:

CSS-animaties

Met CSS-animaties kunt u complexere animaties maken dan met CSS-overgangen. Het hele geheim zit in @keyframes. Met de @keyframes-regel kunt u animatie maken met behulp van een reeks sleutelframes, dat wil zeggen dat de regel de status van een object beschrijft bepaald moment tijd. Laten we naar een eenvoudig voorbeeld kijken.

Onze cirkel is tot leven gekomen en lijkt te pulseren.

Er zijn 9 eigenschappen waarmee u CSS-animaties kunt beheren:

• animatienaam;
• animatieduur;
• animatie-timing-functie;
• animatie-vertraging;
• animatie-iteratie-telling;
• animatie-richting;
• animatie-play-status;
• animatie-vul-modus;
• animatie;

animatienaam- hier is de naam van de animatie die de @keyframes-regel associeert met de selector.

Animatienaam: mijn-animatie;

@keyframes mijn-animatie ( 0% ( dekking: 0; ) 100% ( dekking: 1; ) ) animatie-iteratie-telling

- stelt het aantal herhalingen van de animatie in, de standaardwaarde is 1. De waarde oneindig betekent dat de animatie eindeloos wordt afgespeeld.

Aantal animatie-iteraties: 2; animatie-richting

- bepaalt de richting van de animatie.

Animatierichting: achteruit; - animatie-play-status regelt het stoppen en afspelen van animatie. Er zijn twee waarden: actief (de animatie wordt standaard afgespeeld) en gepauzeerd (stopt de animatie).

Animatie-afspeelstatus: gepauzeerd;

animatie-vul-modus- stelt in welke CSS-eigenschappen voor of na de animatie op het object worden toegepast. Kan de volgende waarden aannemen:

• geen - geanimeerde CSS-eigenschappen worden alleen op het object toegepast terwijl de animatie wordt afgespeeld, en na voltooiing keert het object terug naar de oorspronkelijke staat;
• forwards - geanimeerde CSS-eigenschappen worden op het object toegepast nadat de animatie is afgespeeld;
• achteruit - geanimeerde CSS-eigenschappen worden op het object toegepast voordat de animatie begint te spelen;
• beide - geanimeerde CSS-eigenschappen worden zowel voor als na het einde van de animatie op het object toegepast;

Animatie-vulmodus: achteruit;

Eigenschappen animatie-duur, animatie-timing-functie, animatie-vertraging Ze werken op dezelfde manier als soortgelijke eigenschappen in CSS-overgangen, waarover ik eerder schreef, dus ik zal ze niet herhalen.

Met animaties CSS kun je vrij complexe animaties maken zonder met behulp van JavaScript. Een sprekend voorbeeld- dit zijn laders, dat wil zeggen elementen die laten zien dat er iets op uw pagina wordt geladen. Hier zijn enkele voorbeelden:

Bewegingspadmodule

Met Motion Path Module CSS kunt u bewegingen van objecten langs een pad creëren via de speciale motion-path eigenschap. Voorheen kon een dergelijke animatie alleen met met behulp van SVG of complexe scripts.

Deze specificatie heeft 3 eigenschappen:

• bewegingspad;
• bewegings-offset;
• beweging-rotatie;

bewegingspad- met deze eigenschap kunt u de punten (coördinaten) opgeven waarlangs het object zal bewegen. De syntaxis is hetzelfde als het SVG-padkenmerk.

Bewegingspad: pad("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");

beweging-offset- deze eigenschap zet een object in beweging vanaf het startpunt tot het eindpunt. Het accepteert de dubbele lengte of een percentage. Om het object te laten bewegen, moet u een animatie definiëren die van 0 tot 100% gaat.

@keyframes vliegtuigvlieg ( 0% ( bewegings-offset: 0; ) 100% ( bewegings-offset: 100%; ) )

beweging-rotatie- met deze eigenschap kunt u opgeven aan welke kant het object naar voren zal bewegen. U kunt auto, reverse of uw eigen waarde opgeven in graden ("-45deg", "30deg", enz.).

Beweging-rotatie: auto;

Helaas wordt motion-path momenteel alleen ondersteund in Chrome en Opera, maar laten we hopen dat andere browsers snel hun voorbeeld zullen volgen, want het ding is echt nuttig.

Voor degenen die nog niet hebben begrepen hoe dit werkt, of het beter willen begrijpen, heb ik een voorbeeld gemaakt (link naar codeopen).

Hallo, lieve lezers. Laten we het op deze dag ongeveer hebben over: interessant ding zoals CSS-animatie. Dat wil zeggen, deze animatie van elementen wordt alleen gedaan met behulp van stijlen en er worden hier geen scripts gebruikt.

Zoals u kunt zien, is hier een attribuut aanwezig :zweven, waardoor de achtergrondstijl bij het zweven verandert, zou dit in sommige voorbeelden vereist moeten zijn;

Verander soepel de kleur van een element tijdens het zweven met behulp van de overgang

#doos1 (
marge-onder: 5px;
achtergrondkleur: #ccc;

opvulling: 10px;
tekst uitlijnen: centreren;
breedte: 200px;
hoogte:100px;

tekstinspringing: 0px;
rand: 1px effen #888;
-moz-overgang: achtergrondkleur 0,8s 0,1s gemak;
-o-overgang: achtergrondkleur 0,8s 0,1s gemak;
-webkit-overgang: achtergrondkleur 0,8s 0,1s gemak;
cursor: aanwijzer;)

#doos1 :zweven {
achtergrondkleur: #97CE68;
kleur: #333;
}

Zoals u kunt zien, hebben we deze animatie gerealiseerd met behulp van het attribuut overgang. Hier kunt u de animatiesnelheid in seconden wijzigen in dit geval kost 0,8s totdat de kleur volledig verandert tijdens het zweven en 0,1s voordat de animatie werkt na het zweven en verwijderen van de cursor. (Sorry voor de puzzel :-)) Deze waarde kan naar behoefte worden gewijzigd.

De achtergrondkleur bij het aanwijzen wordt ingesteld als attribuut :zweven, is hier vereist, anders werkt de animatie niet.

Het formaat van een element wijzigen

#doos2 (
marge-onder: 5px;
achtergrondkleur: #ccc;
kleur: #333;

opvulling: 10px;
tekst uitlijnen: centreren;
breedte: 200px;
hoogte:100px;

tekstinspringing: 0px;
rand: 1px effen #888;
-moz-overgang: alle 1s lineair;
-o-overgang: alle 1s lineair;
-webkit-overgang: alle 1s lineair;
cursor: aanwijzer;)

#doos2 :zweven {
achtergrondkleur: #97CE68;
kleur: #000;
breedte: 150px;
hoogte:50px;
}

In dit voorbeeld zijn we geslaagd soepele verandering blokgrootte bij hover. Standaard waarde 200 bij 100, en de hover-waarde is 150 bij 50, die wordt gespecificeerd door het attribuut :zweven.

Hier kun je het blok ook alleen in de breedte of hoogte veranderen, dat hoeft alleen maar :zweven verwijderen breedte:— het blok verandert alleen in hoogte, hoogte:— het blok verandert alleen in de breedte.

U kunt ook de veranderingssnelheid wijzigen. In dit geval is het 1s.

Object-torsie

#box3 (
marge-onder: 5px;
achtergrondkleur: #ccc;
kleur: #333;

opvulling: 10px;
tekst uitlijnen: centreren;
breedte: 200px;
hoogte:100px;

tekstinspringing: 0px;
rand: 1px effen #888;
-moz-overgang: alle 1s 0,1s gemak-in;
-o-overgang: alle 1s 0,1s gemak-in;
-webkit-transitie: alle 1s 0.1s gemak-in;
cursor: aanwijzer;)

#box3:beweeg (
achtergrondkleur: #97CE68;
kleur: #000;
-webkit-transformatie: roteren (360 graden);
-moz-transform: roteren (360 graden);
-o-transformeren: roteren (360 graden);
}

Torsie treedt op bij gebruik transformeren En overgang. In dit geval draait het object 360 graden met de klok mee met een snelheid van één seconde. Als je wilt dat het blok tegen de klok in draait, transformeren waarde moet worden ingesteld op - (min). Uiteraard kan de mate van rotatie worden gewijzigd.

Vloeiend in- en uitzoomen op een object

#box4 (
marge-onder: 5px;
achtergrondkleur: #ccc;
kleur: #333;
opvulling: 10px;
tekst uitlijnen: centreren;
breedte: 200px;
hoogte:100px;

tekstinspringing: 0px;
rand: 1px effen #888;
-moz-overgang: alle 3s gemakshalve;
-o-overgang: alle 3-en gemakshalve;
-webkit-transitie: alle 3s gemak-out;
cursor: aanwijzer;)

#box4:beweeg (
achtergrondkleur: #97CE68;
kleur: #000;
-webkit-transformatie: schaal(2);
-moz-transform: schaal(2);
-o-transformeren: schaal(2);
}

In dit voorbeeld wordt het blok vloeiend 2 keer groter. Deze waarde is ingesteld transformeren: schaal(2). Als u de waarde instelt op 1,5, wordt het blok 1,5 keer vergroot.

Op dezelfde manier als jij verkleinen blok, stel de waarde bijvoorbeeld in op 0,5.

Soepele blokverschuiving naar beneden

#doos5 (
marge-onder: 5px;
achtergrondkleur: #ccc;
kleur: #333;
opvulling: 10px;
tekst uitlijnen: centreren;
breedte: 200px;
hoogte:100px;

tekstinspringing: 0px;
rand: 1px effen #888;
-moz-transitie: alle 1's gemak-in-uit;
-o-overgang: alle 1's gemak-in-uit;
-webkit-transitie: alle 1s gemak-in-uit;
cursor: aanwijzer;)

#box5:beweeg (
achtergrondkleur: #97CE68;
kleur: #000;
-webkit-transformeren: vertalen(0.50px);
-moz-transform: vertalen(0.50px);
-o-transform: vertalen(0.50px);
}

Hier wordt de beweging gespecificeerd in pixels. In dit geval (0,50px). Je kunt het blok ook omhoog laten komen met deze waarde van 0.-50px. Of diagonaal 50px, 50px naar beneden. Kortom, het blok kan overal naartoe worden verplaatst.

Dat is eigenlijk alles wat ik wilde zeggen. Nee, niet alles :-) Ik vergat je eraan te herinneren dat deze CSS-animatie kan worden toegepast op alle objecten op de site: afbeeldingen, tekst, kopjes, pictogrammen, enz. Voor schakels is een vloeiende kleurverandering perfect; naar mijn mening is het erg mooi. :-)

En deze informatie werd ook met ons gedeeld door de site shpargalkablog.ru. Waarvoor ik hem hartelijk dank.

Dat is nu allemaal zeker :-) Tot snel, vrienden.

Dat hebben wij onlangs gezien overgangen- Het is maar een manier animaties stijleigenschappen van origineel naar definitief voorwaarde.

Overgangen in CSS zijn dat dus wel specifiek type animatie, waarbij:

• er zijn slechts twee toestanden: begin en einde;
• de animatie is niet herhaald;
• tussenliggende toestanden worden alleen bestuurd door een tijdfunctie.

Maar wat als je wilt:

• controle over hebben tussenliggend staten?
• lus animatie?
• Doen verschillende soorten animaties voor een element?
• animeer een specifieke eigenschap alleen op half manieren?
• imiteren verschillende functies tijd voor verschillende eigendommen?

Met animatie in CSS kunt u dit allemaal en meer doen.

Animatie is als een minifilm, waarbij je als regisseur instructies (stijlregels) geeft aan je acteurs ( HTML-elementen) voor verschillende scènes (keyframes).

Animatie-eigenschappen

Net als transition is de animatie-eigenschap afgekort voor een paar anderen:

• animatienaam : animatienaam;
• animatieduur: hoe lang de animatie duurt;
• animatie-timing-functie: hoe tussenliggende toestanden worden berekend;
• animatie-delay : animatie begint na enige tijd;
• animatie-iteratie-count : hoe vaak de animatie moet worden uitgevoerd;
• animatie-richting: moet de beweging naar binnen gaan achterkant of niet;
• animatie-vul-modus: welke stijlen worden toegepast voordat de animatie begint en nadat deze eindigt.

Snel voorbeeld

Om de downloadknop te animeren, kunt u een animatie schrijven stuiteren:

@keyframes stuiteren( 0% (onder: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); ) 100% (onder: 50px; box-shadow: 0 50px 50px rgba(0,0, 0,0.1); ) .loading-knop ( animatie: stuiteren 0,5s kubieke-bezier(0.1,0.25,0.1,1) 0s oneindig afwisselend beide; )

Eerst moet je een daadwerkelijke stuiterende animatie schrijven met @keyframes en deze noemen.

Ik gebruikte afgekort animatie-eigenschap en omvatte alle mogelijke opties:

• animatienaam: stuiteren (hetzelfde als keyframenaam)
• animatieduur: 0,5s (halve seconde)
• animatie-timing-functie: kubieke-bezier(0.1,0.25,0.1,1)
• animatie-vertraging: 0s (geen vertraging)
• animatie-iteratie-telling: oneindig (speelt eindeloos af)
• animatie-richting: afwisselend (gaat heen en weer)
• animatie-vul-modus: beide

@sleutelframes

Voordat u animatie op HTML-elementen toepast, heeft u dit nodig schrijf een animatie met behulp van keyframes. Over het algemeen zijn sleutelframes elk tussenstap bij animatie. Ze worden bepaald aan de hand van percentages:

• 0% - eerste stap van animatie;
• 50% is de helft van de animatie;
• 100% is de laatste stap.

Kan ook gebruikt worden trefwoorden van en tot in plaats van respectievelijk 0% en 100%.

U kunt zoveel keyframes definiëren als u wilt, bijvoorbeeld 33%, 4% of zelfs 29,86%. In de praktijk schrijf je er maar een paar.

Elk sleutelframe is CSS-regel , dit betekent dat je kunt schrijven CSS-eigenschappen zoals gewoonlijk.

Om een ​​animatie te definiëren, schrijft u er eenvoudigweg het trefwoord @keyframes bij naam:

@keyframes rond ( 0% (links: 0; boven: 0; ) 25% (links: 240px; boven: 0; ) 50% (links: 240px; boven: 140px; ) 75% (links: 0; boven: 140px ) 100% (links: 0; boven: 0; ) ) p ( animatie: ongeveer 4s lineair oneindig; )

Merk op dat het begin 0% en het einde 100% bevatten dezelfde regels CSS. Dit zorgt ervoor dat de animatie perfect doorloopt. Omdat de iteratieteller op oneindig is ingesteld, gaat de animatie van 0% naar 100% en vervolgens onmiddellijk rug naar 0% enzovoort, voor onbepaalde tijd.

animatienaam

Naam animatie wordt gebruikt door ten minste, tweemaal:

• bij schrijven animaties met @keframes ;
• bij gebruik animatie met behulp van de eigenschap animatienaam (of de eigenschap animatie steno).

@keyframes wat dan ook ( /* ... */ ) .selector ( animatienaam: wat dan ook; )

Zoals namen CSS-klassen, kan de naam van de animatie alleen het volgende bevatten:

• letters (a-z);
• cijfers (0-9);
• onderstrepingsteken(_);
• koppelteken (-).

De naam mag niet beginnen met een cijfer of twee koppeltekens.

animatie-duur

Net als de duur van de overgang kan de duur van de animatie worden ingesteld seconden(1s) of milliseconden(200ms).

Selector (animatieduur: 0,5s; )

De standaardwaarde is 0s, wat betekent dat er helemaal geen animatie is.

animatie-timing-functie

Net als bij transitietimingfuncties kunnen animatietimingfuncties worden gebruikt trefwoorden, zoals lineair, easy-out of kan worden gedefinieerd met behulp van willekeurige Bezier-curven.

Selector ( animatie-timing-functie: gemak-in-uit; )

Standaardwaarde: gemak.

Omdat animatie in CSS keyframes gebruikt, kunt u dit instellen lineair functie van tijd en simuleren specifieke Bezier-curve door te definiëren veel zeer specifiek sleutelframes. Bekijk Bounce.js voor geavanceerde animatie.

animatie-vertraging

Net als bij overgangsvertraging kan animatievertraging worden ingesteld seconden(1s) of milliseconden(200ms).

De standaardwaarde is 0 seconden, wat betekent dat er geen enkele vertraging is.

Handig als u meerdere animaties in een serie.

A, .b, .c ( animatie: stuiteren 1s; ) .b ( animatie-vertraging: 0,25s; ) .c ( animatie-vertraging: 0,5s; )

animatie-iteratie-telling

Standaard wordt de animatie alleen afgespeeld eenmaal(waarde 1). U kunt drie soorten waarden instellen:

• hele getallen, zoals 2 of 3;
• fractionele getallen zoals 0,5, die slechts de helft van de animatie afspelen;
• oneindig trefwoord, dat de animatie eindeloos herhaalt.

.selector ( animatie-iteratie-telling: oneindig; )

animatie-richting

De eigenschap animatierichting geeft aan of in welke volgorde sleutelframes worden gelezen.

• normaal: begint bij 0%, eindigt bij 100%, begint weer bij 0%.
• omgekeerd: begint bij 100%, eindigt bij 0% en begint opnieuw bij 100%.
• alternatief: begint bij 0%, gaat naar 100%, keert terug naar 0%.
• afwisselend-reverse: begint bij 100%, gaat naar 0%, keert terug naar 100%.

Dit is gemakkelijker voor te stellen als het aantal animatie-iteraties is ingesteld op oneindig.

animatie-vul-modus

De eigenschap animatie-vulmodus bepaalt wat er gebeurt voor begin van animatie en na de voltooiing ervan.

Bij het bepalen sleutelframes kan worden gespecificeerd CSS-regels , die zal worden toegepast bij verschillende animatiestappen. Nu kunnen deze CSS-regels dat wel botsen met degenen die al toegepast naar geanimeerde elementen.

Met animatie-vulmodus kunt u de browser vertellen of animatie stijlen Ook moet worden toegepast voorbij animatie.

Laten we ons voorstellen knop, dat is:

• rood standaard;
• wordt blauw aan het begin van de animatie;
• en uiteindelijk groente wanneer de animatie voltooid is.

CSS3-animatie wordt vrij veel gebruikt. Het is tijd dat zelfs de meest beginnende websitebouwers begrijpen wat CSS-animatie is en hoe ze deze kunnen maken. Je zou kunnen denken dat CSS3-animatie draait om het laten bewegen van blokken en dat het op een tekenfilm lijkt. Maar CSS-animatie gaat niet alleen over het verplaatsen van een element van het ene punt naar het andere, maar ook over vervorming en andere transformaties. Om dit ook voor beginners duidelijk te maken, heb ik alles stap voor stap opgeschreven.

1. Basiseigenschappen van CSS3-animatie

Een klein theoretisch blok waaruit je begrijpt welke CSS3-eigenschappen verantwoordelijk zijn voor animatie, en welke waarden ze kunnen aannemen.

• animatienaam— een unieke naam voor de animatie (keyframes, we zullen er hieronder over praten).
• animatie-duur— animatieduur in seconden.
• animatie-timing-functie—ve. Op het eerste gezicht is het erg onduidelijk. Het is altijd gemakkelijker om het met een voorbeeld te laten zien, en je zult ze hieronder zien. Kan nemen volgende waarden: lineair | gemak | gemak | gemak | kubieke-Bezier(n,n,n,n) .
• animatie-vertraging— vertraging in seconden voordat de animatie begint.
• @keyframes mijn-animatie ( 0% ( dekking: 0; ) 100% ( dekking: 1; ) )— aantal animatieherhalingen. Het kan eenvoudigweg als een getal worden opgegeven, of u kunt oneindig specificeren en de animatie zal eindeloos worden uitgevoerd.

Hier zijn slechts de basiseigenschappen, die meer dan voldoende zijn om uw eerste CSS3-animatie te maken.

Het laatste dat we vanuit de theorie moeten weten en begrijpen, is hoe we sleutelframes kunnen creëren. Ook dit is eenvoudig te doen en gebeurt met behulp van de @keyframes-regel, waarbinnen de keyframes worden opgegeven. De syntaxis voor deze regel is:

Hierboven stellen we het eerste en laatste frame in. Alle tussenliggende toestanden worden AUTOMATISCH berekend!

2. Echt voorbeeld van CSS3-animatie

De theorie is, zoals gewoonlijk, saai en niet altijd duidelijk. Het is veel gemakkelijker om alles te zien echt voorbeeld, maar u kunt dit het beste zelf doen op een HTML-testpagina.

Als je een programmeertaal leert, schrijf je meestal een 'Hallo wereld!'-programma, waaruit je de syntaxis van deze taal en enkele andere basiszaken kunt begrijpen. Maar we bestuderen geen programmeertaal, maar een beschrijvingstaal verschijning document. Daarom zullen we onze eigen "Hallo wereld!"

Dit is wat we bijvoorbeeld gaan doen: laten we een soort blok hebben