TL
Tool Lab
💰Donate
💰Donate

CSS Animation Generator

Build CSS keyframe animations with live preview.

Box
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

Over deze tool

De CSS-animatiegenerator maakt vloeiende animaties door keyframe-presets, timing, duur, vertraging en iteraties te configureren. Een live voorbeeld toont de animatie in actie.

CSS-animaties met transform en opacity zijn efficiënt omdat ze op de GPU worden samengesteld en geen layout of repaint activeren.

Hoe te gebruiken

  1. Selecteer een animatietype uit het dropdown-menu.
  2. Stel de duur in (bijv. 0.5s, 2s).
  3. Kies een timing-functie om de easing te regelen.
  4. Stel optioneel een vertraging in voor de start van de animatie.
  5. Stel het aantal iteraties in (een getal of infinite).
  6. Klik op Opnieuw afspelen voor een voorbeeld, dan Kopiëren om de CSS te exporteren.

Gebruiksscenario's

Front-end ontwikkelaars gebruiken fade- en slide-animaties om de waargenomen laadprestaties te verbeteren. UI-ontwerpers prototypen micro-interacties zoals knoppulsen.

Veelgestelde vragen

  • Wat is fill-mode: both? — De animatie past beginstijlen toe vóór het starten en behoudt eindstijlen na afloop. Dit is de meest nuttige instelling.
  • Hoe maak je een animatie voor altijd lopen? — Stel het aantal iteraties in op infinite.
  • Zijn CSS-animaties beter dan JavaScript? — Voor eenvoudige effecten worden CSS-animaties geprefereerd. Voor complexe sequenties biedt JavaScript meer controle.