Softonic

CSS-animatiegenerator

Stap 1 / 2
Voorinstelling
Volgende

@keyframes vanaf nul schrijven is vermoeiend: u kiest percentages, raadt eigenschappen, herlaadt, bekijkt, past aan. Deze generator biedt zes kant-en-klare animaties (fade, slide-up, bounce, spin, pulse en shake) en laat u de naam, duur, easing, het aantal herhalingen en de richting instellen. Het resultaat speelt in realtime af en als u tevreden bent, kopieert u het gegenereerde @keyframes-blok en de verkorte eigenschap animation.

Zo maakt u een CSS-animatie

  1. 1

    Kies een preset

    Kies een van de zes ingebouwde animaties: fade, slide-up, bounce, spin, pulse of shake.

  2. 2

    Geef de animatie een naam

    Geef de keyframes een geldige CSS-identificatie, zoals `cardIn` of `fadeIn`. Dezelfde naam wordt gebruikt in de verkorte `animation`-eigenschap.

  3. 3

    Stel timing en herhaling in

    Duur in seconden, easing (ease, ease-in, ease-out, ease-in-out, linear of spring), aantal herhalingen (1, 2, 3 of infinite) en richting (normal, reverse, alternate of alternate-reverse).

  4. 4

    Kopieer de CSS

    De gegenereerde `@keyframes`-regel en de verkorte `animation:`-notatie, klaar om in uw stylesheet te plakken.

Anatomie van een animatie

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

Acht eigenschappen in de verkorte notatie: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Easing-opties

De generator biedt zes easing-functies:

Easing cubic-bezier() Gevoel
linear n.v.t. Constante snelheid
ease-in 0.42, 0, 1, 1 Langzame start, snelle eind
ease-out 0, 0, 0.58, 1 Snelle start, langzame eind
ease-in-out 0.42, 0, 0.58, 1 Langzaam-snel-langzaam
ease (standaard) 0.25, 0.1, 0.25, 1 Zacht standaard
spring 0.68, -0.55, 0.27, 1.55 Schiet voorbij en stabiliseert

Animeer de juiste eigenschappen

De browser kan elke eigenschap animeren, maar slechts enkele lopen vloeiend op de GPU zonder layout of paint te activeren:

Goedkoop (alleen compositie): transform, opacity, filter.

Duur (layout/paint): width, height, top, left, margin, padding, background-color.

Zestig frames per seconde over width en top is mogelijk op kleine elementen, maar op mobiel hapert het als u er veel tegelijk animeert. Geef bij complexe beweging altijd de voorkeur aan transform: translate(...) boven top / left, en transform: scale(...) boven geanimeerde breedte/hoogte.

will-change: gebruik het spaarzaam

De browser vragen een compositielaag vooraf te reserveren kan de vloeiendheid verbeteren:

.card { will-change: transform; }

Maar het kost geheugen. Pas het toe vlak voordat de animatie start en verwijder het als deze klaar is. will-change: transform permanent op veel elementen zetten kan meer kwaad dan goed doen.

Verminderde beweging

Sommige gebruikers zijn gevoelig voor beweging en zetten systeemvoorkeuren:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Respecteer deze instelling. Bied een onmiddellijke statuswijziging of een heel subtiele fade aan als alternatief.

Veelgestelde vragen

CSS voor eenvoudige, declaratieve, eenmalige beweging. Web Animations API (element.animate()) voor JavaScript-gestuurde timing, dynamische keyframes, pauzeren en afspeelcontrole. Beide draaien op de compositor; geen van beide is inherent sneller.

Bijna altijd omdat u een layout-triggerende eigenschap (width, top, margin) animeert in plaats van transform. Schakel over op translate() en scale() en het haperen verdwijnt meestal.

Ja, animation: a 1s, b 1s 1s, c 1s 2s; voert drie animaties na elkaar uit via versprongen vertragingen. Deze generator levert één animatie op, dus voeg de extra vermeldingen zelf toe aan de verkorte notatie. Gebruik voor complexere choreografie de Web Animations API of een bibliotheek zoals GSAP.

Het zorgt dat het element vóór de start (tijdens de vertraging) de from-status aanneemt en na afloop de to-status vasthoudt. Zonder both springt het element terug naar zijn stijl van vóór de animatie. De generator houdt de notatie minimaal; voeg de fill mode zelf toe als u die nodig hebt.

Gerelateerde tools

JSON naar PHP-array

Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.

Luhn-algoritme-checker

Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Tool beschikbaar in andere talen