CSS3 övergång generator
Mjuk opacitetsövergång
Populära förinställningar
Tona-effekt
Mjuk opacitetsövergång
Skala effekt
Ändra storlek på element när du håller muspekaren över det
Rotera effekt
Rotera element när du håller muspekaren över det
Glid effekt
Flytta elementets position
Färgförändring
Övergång till bakgrundsfärg
Om övergångar
Med CSS-övergångar kan du ändra egenskapsvärden smidigt under en viss tid.
Vanligtvis animerade egenskaper inkluderar:
- bredd, höjd
- marginal, utfyllnad
- opacitet, färg
- transform (scale, rotate, translate)
- background-color
Proffstips: Använd alternativet "Alla egenskaper" för att animera alla ändringar.
Preview
Genererad kod
.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; } .element:hover { /* Hover styles will be generated here */ }
Kontroller för övergångar
Sväva över effekter
Related Tools
Skapa perfekta Flexbox-layouter
Visualisera, anpassa och generera CSS flexbox-kod med vårt intuitiva dra-och-släpp-gränssnitt.
Sass till CSS Converter
Omvandla din Sass-kod till CSS. Snabbt, enkelt och säkert.
Mindre till CSS Converter
Omvandla din Less-kod till CSS. Snabbt, enkelt och säkert.
Whirlpool Hash Kalkylator
Generera Whirlpool-hash snabbt och enkelt
CMYK till PANTONE
Konvertera CMYK-färgvärden till närmaste Pantone-motsvarigheter® för tryckdesign
Omvandlare av tal till ord
Konvertera numeriska värden till deras ordrepresentationer på flera språk