TL
Tool Lab
💰Donate
💰Donate

CSS Transition Generator

Configure CSS transitions with hover preview.

Övergång 1
För muspekaren hit
.element {
  transition: all 0.3s ease 0s;
}

.element:hover {
  /* apply your hover styles here */
}

Om det här verktyget

CSS-övergångsgeneratorn låter dig konfigurera transition-shorthandsegenskapen genom att ange målegenskapen, varaktigheten, tidsfunktionen och fördröjningen. Den interaktiva förhandsvisningen visar övergångsbeteendet innan du kopierar koden.

CSS-övergångar skapar mjuka tillståndsändringar mellan två CSS-värden som utlöses av pseudoklasser som :hover, :focus eller klassändringar via JavaScript.

Hur man använder

  1. Välj CSS-egenskapen att animera (eller använd all).
  2. Ange varaktigheten — hur länge övergången tar (t.ex. 0.3s).
  3. Välj en tidsfunktion för att styra accelerationskurvan.
  4. Lägg valfritt till en fördröjning innan övergången börjar.
  5. För muspekaren över förhandsvisningsrutan för att se effekten live, kopiera sedan CSS.

Användningsfall

Utvecklare använder övergångar för knapphoveringeffekter, kortzoom och färgbyten i navigeringslänkar. Formulärdesigners använder dem för indatafokunstillar.

Vanliga frågor

  • Vad är skillnaden mellan transition och animation? — Övergångar reagerar på en tillståndsändring (som hover); animationer körs automatiskt eller i en slinga med keyframes.
  • Kan jag animera flera egenskaper? — Ja. Klicka på "Lägg till övergång" för att lägga till flera kommaavgränsade egenskapsregler.
  • Vilka egenskaper kan animeras? — De flesta egenskaper med numeriska värden: opacity, color, transform, dimensioner m.m. Egenskaper som display kan inte animeras.