CSS-animaties genereren
Maak CSS-keyframe-animaties met een visuele tijdlijneditor
Animatie-instellingen
Animatievoorinstellingen
Keyframes
0% → 100%
Keyframe · 0%
Keyframe · 100%
Live voorbeeld
Gegenereerde CSS
@keyframes myAnimation {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-delay: 0s;
}Bewerk de keyframes en speel opnieuw af om uw animatie te controleren.
Snelle transformatievoorbeelden
translateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)skewX(10deg) of skewY(-5deg)perspective(400px) en rotateY(180deg)Over CSS-animaties genereren
Met onze gratis CSS-animatiegenerator bouwt u visueel professionele keyframe-animaties, zonder complexe code helemaal zelf te schrijven. Stel elk aspect van uw animatie in, van duur en timingfuncties tot de eigenschappen per keyframe, en zie het resultaat direct in een live voorbeeld dat in realtime bijwerkt.
Of u nu een subtiel infade-effect, een opvallende stuiter of een eigen animatie in meerdere stappen nodig hebt: deze tool biedt 10 ingebouwde voorinstellingen en een volledige keyframe-editor. Elke voorinstelling is volledig aanpasbaar, dus u kunt ze als beginpunt gebruiken en elke eigenschap bijstellen, waaronder transform, opacity en achtergrondkleur, op elk percentagepunt.
De generator levert schone, productieklare CSS-code met de juiste @keyframes-syntaxis en afzonderlijke animatie-eigenschappen. Kopieer de gegenereerde code en plak die in uw stylesheet. Alles gebeurt in uw browser en er wordt niets naar een server geüpload, zodat uw werk privé en veilig blijft.
Belangrijkste functies
- Visuele keyframe-editor met opties voor transform, opacity en background-color per keyframe
- 10 kant-en-klare animatievoorinstellingen: Stuiteren, Infaden, Uitfaden, Links inschuiven, Rechts inschuiven, Draaien, Pulseren, Schudden, Omdraaien en Inzoomen
- Live voorbeeldvenster met direct opnieuw afspelen om animaties te testen
- Volledige besturing van animatie-eigenschappen, waaronder duur, timingfunctie, aantal herhalingen, richting, vulmodus en vertraging
- Ondersteuning voor een eigen cubic-bezier-timingfunctie voor nauwkeurige versnellingscurves
- Keyframes toevoegen en verwijderen op elk percentagepunt (0%, 25%, 50%, 75%, 100% of eigen waarde)
- Schone CSS-uitvoer met @keyframes en afzonderlijke animatie-eigenschappen, klaar voor productie
- Met één klik naar het klembord kopiëren voor directe integratie in uw projecten
- Eigen animatienamen voor georganiseerde en semantische code
- Volledige ondersteuning voor donkere modus voor prettig bewerken in elke omgeving
Zo gebruikt u CSS-animaties genereren
- Kies een beginpunt: Kies een van de 10 ingebouwde voorinstellingen, zoals Stuiteren, Infaden of Draaien, of begin met een lege animatie.
- Pas de animatie-eigenschappen aan: Stel duur, timingfunctie, aantal herhalingen, richting, vulmodus en vertraging in met de overzichtelijke bedieningselementen.
- Bewerk keyframes: Voeg keyframes toe, verwijder of wijzig ze op elk percentagepunt. Stel transform-waarden, opacity en achtergrondkleuren in voor elk keyframe.
- Bekijk uw animatie: Zie het live voorbeeld in realtime bijwerken. Klik op Opnieuw afspelen om de animatie opnieuw te starten en het resultaat te controleren.
- Kopieer de CSS-code: Klik op de knop CSS kopiëren om de gegenereerde @keyframes- en animatie-eigenschapcode naar uw klembord te kopiëren.
- Plak het in uw project: Voeg de gekopieerde CSS toe aan uw stylesheet en pas de animatieklasse toe op uw HTML-elementen.
Toepassingen
- Micro-interacties: Voeg subtiele hover-effecten, knopanimaties en feedbacksignalen toe om de betrokkenheid van gebruikers te vergroten.
- Laadindicatoren: Maak eigen spinners, pulseffecten en skeleton-screenanimaties voor laadstatussen.
- Paginaovergangen: Bouw inschuif-, infade- en zoomeffecten voor pagina-elementen die bij scrollen of laden worden geanimeerd.
- Aandachtstrekkers: Ontwerp schud-, stuiter- en pulsanimaties om de aandacht van gebruikers op belangrijke UI-elementen te vestigen.
- Prototypes voor designsystemen: Maak snel prototypes van animatiepatronen en standaardiseer ze in de componentenbibliotheek van uw team.
- CSS-animaties leren: Experimenteer met keyframes, timingfuncties en animatie-eigenschappen in een visuele omgeving.
- Presentatie-effecten: Maak geanimeerde elementen voor webpresentaties en portfolio's.
Veelgestelde vragen
Is deze tool gratis?
Ja, CSS-animaties genereren is volledig gratis, zonder gebruikslimieten. U kunt onbeperkt animaties maken, alle voorinstellingen gebruiken en de gegenereerde CSS-code zonder beperkingen kopiëren.
Zijn mijn gegevens veilig?
Het genereren en bekijken van animaties gebeurt volledig in uw browser. Er worden geen gegevens naar een server gestuurd, dus uw animatie-instellingen en CSS-code blijven helemaal privé.
Welke browsers ondersteunen CSS-animaties?
CSS-animaties worden ondersteund door alle moderne browsers, waaronder Chrome, Firefox, Safari, Edge en Opera. De gegenereerde code gebruikt de standaard @keyframes-syntaxis, die in alle huidige browserversies werkt.
Kan ik meerdere animaties op één element combineren?
Ja, u kunt meerdere animaties op één element toepassen door in CSS de animatienamen met komma's te scheiden. Genereer elke animatie afzonderlijk en combineer ze in uw stylesheet.
Wat is een cubic-bezier-timingfunctie?
Een cubic-bezier-functie bepaalt een eigen versnellingscurve voor uw animatie. Met vier waarden stuurt u hoe de animatie versnelt en vertraagt, waardoor u nauwkeuriger kunt afstellen dan met standaardopties als ease-in of ease-out.
Tips & best practices
- Gebruik transform en opacity: Animeer de eigenschappen transform en opacity voor de beste prestaties, omdat de GPU deze kan versnellen.
- Houd animaties subtiel: Subtiele animaties (0,2s-0,5s) ogen bij de meeste UI-interacties verzorgder dan lange, dramatische.
- Respecteer gebruikersvoorkeuren: Gebruik de mediaquery prefers-reduced-motion om animaties uit te schakelen of te beperken voor gebruikers die minder beweging willen.
- Kies de juiste vulmodus: Gebruik "forwards" om de eindstatus te behouden, "backwards" om het eerste keyframe tijdens de vertraging toe te passen, of "both" voor volledige controle.
- Test op meerdere apparaten: Bekijk uw animaties op mobiele apparaten, waar de prestaties kunnen afwijken van desktopbrowsers.