CSS-animatiegenerator
Pas bewegingsvoorinstellingen of keyframes aan en speel de animatie af om die te controleren. Haal CSS op voor gebruik op een webpagina en een HTML-gebruiksvoorbeeld.
Wat je kunt doen
Beweging aanpassen met een voorinstelling
Kies uit 12 typen, waaronder binnenkomen, weggaan en draaien. Pas de duur en herhaling aan je gebruik aan.
Ook tussenliggende toestanden bewerken
Geef voor elk keyframe verplaatsing, rotatie, schaal en dekking op en bekijk de gegenereerde beweging.
CSS en HTML ophalen
Kopieer of sla de animatie-CSS en een HTML-gebruiksvoorbeeld met dezelfde class op.
Gebruiksaanwijzing
Een voorinstelling kiezen
Kies de gewenste beweging en stel de duur van 1 afspeelbeurt in. Als je een andere voorinstelling selecteert, worden ook alle aangepaste instellingen vervangen.
Alleen de benodigde onderdelen aanpassen
Open de afspeeldetails of keyframes om tussenliggende beweging, richting, herhaling en andere instellingen te wijzigen.
Genereren en afspelen
Controleer de animatie met ‘CSS genereren en voorbeeld bekijken’. Genereer opnieuw als je instellingen wijzigt.
CSS en HTML ophalen
Pas de CSS toe en voeg de class toollet-motion toe aan een HTML-element. Gebruik het HTML-gebruiksvoorbeeld samen met de CSS.
Handig wanneer je
Een binnenkomstanimatie maken
een voorinstelling voor infaden of van onderaf binnenkomen gebruikt om de binnenkomstbeweging en snelheid aan te passen.
Beweging bij interactie met een knop
de startvoorwaarde wijzigt in hover of toetsenbordfocus om beweging te maken die op interactie reageert.
Keyframes en afspeelvoorwaarden begrijpen
Tussenliggende toestanden en duur
Het %-percentage van een keyframe is de positie ervan binnen 1 afspeelbeurt. Bij een animatie van 1 seconde valt 50% op 0,5 seconden. Easing bepaalt hoe waarden tussen keyframes veranderen.
Verplaatsing, rotatie en weergave
De horizontale/verticale positie is de verplaatsing ten opzichte van de oorspronkelijke positie. Een schaal van 1 is de oorspronkelijke grootte; een dekking van 0 is transparant en 1 is ondoorzichtig.
Vertraging, herhaling en richting
De vertraging wordt maar één keer toegevoegd voordat het afspelen begint. Bij een eindig aantal herhalingen is de totale tijd: vertraging + duur van 1 afspeelbeurt × aantal herhalingen. Afwisselend schakelt tussen vooruit en achteruit.
Toestanden vóór en na het afspelen
Kies welke toestand tijdens de vertraging en na afloop van het afspelen wordt weergegeven. Instellingen voor omkeren en afwisselen veranderen welke keyframeposities aan het begin en einde van het afspelen worden gebruikt.
Instellingen voor verminderde beweging
De gegenereerde CSS ondersteunt de instelling ‘Verminder beweging’ van je apparaat. De animatie wordt gestopt en de eindtoestand gebruikt die door de ingestelde richting en het aantal herhalingen wordt bepaald. Bij oneindig afspelen wordt het eindpunt van de eerste afspeelbeurt gebruikt.
Veelgestelde vragen
Kan ik het maar één keer afspelen?
Schakel ‘Blijven herhalen’ uit en stel het aantal herhalingen in op 1. Standaardvoorinstellingen beginnen met 1 afspeelbeurt; bij draaien en zweven is doorlopend herhalen standaard ingeschakeld.
Op welk element moet ik de CSS toepassen?
Voeg de klasse toollet-motion toe aan een HTML-element en gebruik die samen met de gegenereerde CSS. Het HTML-gebruiksvoorbeeld is een fragment van een button-element, geen volledige zelfstandige webpagina.
Hoeveel keyframes kan ik maken?
Je kunt 2–8 keyframes hebben, inclusief het begin op 0% en het einde op 100%. Een keyframe toevoegen plaatst het op het midden van het breedste interval. Het begin en einde kunnen niet worden verwijderd; alleen hun %-posities liggen vast.
Het voorbeeld verdween nadat ik een instelling wijzigde.
Resultaten worden gewist wanneer instellingen veranderen, zodat je niet per ongeluk beweging of code van eerdere instellingen gebruikt. Genereer opnieuw om de huidige instellingen te controleren.
Waarom beweegt het voorbeeld niet?
De beweging stopt wanneer op je apparaat ‘Verminder beweging’ is ingeschakeld. Controleer bij instellingen voor hover en focus ook de startvoorwaarden. Het voorbeeld wordt gepauzeerd wanneer je naar een ander tabblad gaat.
Kan ik meerdere animaties op dezelfde pagina gebruiken?
De gegenereerde class- en keyframenamen zijn gedeeld. Als je afzonderlijke animaties wilt gebruiken, wijzig je voor elke animatie beide namen en verwerk je die wijzigingen in de bijbehorende HTML.
Invoer en resultaten
- Instellingen
- 12 voorinstellingen, 2–8 keyframes en een duur van 0,2–60 seconden.
- Afspelen
- Een vertraging van 0–60 seconden, 1–100 herhalingen of oneindig herhalen, easing, richting, toestanden vóór en na het afspelen en startvoorwaarden.
- Uitvoer
- CSS en een HTML-gebruiksvoorbeeld. Alleen de beweging wordt gedefinieerd; er wordt geen volledige webpagina of videobestand gemaakt.