Softonic

CSS-animationsgenerator

Steg 1 / 2
Förinställning
Nästa

Att skriva @keyframes från grunden är tråkigt: du väljer procent, gissar egenskaper, laddar om, tittar, justerar. Den här generatorn ger dig sex färdiga animationer (toning, glid upp, studs, snurr, puls och skak) och låter dig ställa in animationens namn, längd, easing, antal repetitioner och riktning. Resultatet spelas upp i realtid, och när du är nöjd kan du kopiera det genererade @keyframes-blocket och den korta animation-egenskapen.

Så bygger du en CSS-animation

  1. 1

    Välj en förinställning

    Välj en av de sex inbyggda animationerna: toning, glid upp, studs, snurr, puls eller skak.

  2. 2

    Namnge animationen

    Ge keyframes en giltig CSS-identifierare, till exempel `cardIn` eller `fadeIn`. Samma namn används i den korta `animation`-egenskapen.

  3. 3

    Ställ in timing och upprepning

    Längd i sekunder, easing (ease, ease-in, ease-out, ease-in-out, linear eller spring), antal repetitioner (1, 2, 3 eller infinite) och riktning (normal, reverse, alternate eller alternate-reverse).

  4. 4

    Kopiera CSS-koden

    Den genererade `@keyframes`-regeln och den korta `animation:`-formen, redo att klistra in i din stilmall.

Animationsanatomi

@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;
}

Åtta egenskaper i den korta formen: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Easing-val

Generatorn erbjuder sex easing-funktioner:

Easing cubic-bezier() Känsla
linear n/a Konstant hastighet
ease-in 0.42, 0, 1, 1 Långsam start, snabbt slut
ease-out 0, 0, 0.58, 1 Snabb start, långsamt slut
ease-in-out 0.42, 0, 0.58, 1 Långsamt-snabbt-långsamt
ease (standard) 0.25, 0.1, 0.25, 1 Mjuk standard
spring 0.68, -0.55, 0.27, 1.55 Studsar förbi och landar

Animera rätt egenskaper

Webbläsaren kan animera vilken egenskap som helst, men bara ett fåtal flyter smidigt på GPU:n utan att utlösa layout eller målning:

Billiga (endast kompositering): transform, opacity, filter.

Dyra (layout/målning): width, height, top, left, margin, padding, background-color.

Animationer med sextio bilder per sekund över width och top går på små element, men kollapsar på mobilen om du animerar många samtidigt. För komplex rörelse, föredra alltid transform: translate(...) framför top / left och transform: scale(...) framför animerad bredd/höjd.

will-change: använd sparsamt

Att be webbläsaren förallokera ett kompositlager kan förbättra mjukheten:

.card { will-change: transform; }

Men det kostar minne. Applicera det precis innan animationen utlöses och ta bort det när den är klar. Att permanent sätta will-change: transform på många element kan göra mer skada än nytta.

Minskad rörelse

En del användare är känsliga för rörelse och ställer in systempreferenser:

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

Respektera den här inställningen. Erbjud en omedelbar tillståndsändring eller en mycket subtil toning som ersättning.

Vanliga frågor

CSS för enkel, deklarativ, engångsrörelse. Web Animations API (element.animate()) för JavaScript-styrd timing, dynamiska keyframes, paus och uppspelningskontroll. Båda körs på kompositorn; ingen är i sig snabbare.

Nästan alltid för att du animerar en layoututlösande egenskap (width, top, margin) i stället för transform. Byt till translate() och scale() så försvinner hackandet oftast.

Ja, animation: a 1s, b 1s 1s, c 1s 2s; kör tre animationer i följd via förskjutna fördröjningar. Den här generatorn matar ut en enda animation, så lägg till de extra posterna i den korta formen själv. För mer komplex koreografi, använd Web Animations API eller ett bibliotek som GSAP.

Det får elementet att anta from-tillståndet innan animationen börjar (under fördröjningen) och hålla kvar to-tillståndet efter att den slutar. Utan both hoppar elementet tillbaka till sin tidigare stil när animationen är klar. Generatorn håller formen minimal, så lägg till fill mode själv om du behöver det.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

Verktyget finns på andra språk