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
Sass till CSS Converter
Omvandla din Sass-kod till CSS. Snabbt, enkelt och säkert.
Skapa perfekta Flexbox-layouter
Visualisera, anpassa och generera CSS flexbox-kod med vårt intuitiva dra-och-släpp-gränssnitt.
Mindre till CSS Converter
Omvandla din Less-kod till CSS. Snabbt, enkelt och säkert.
Byte Enhet Omvandlare
Konvertera mellan olika enheter av digital information med precision
Konvertera CSV till JSON utan ansträngning
Omvandla dina CSV-data till strukturerat JSON-format med ett enda klick. Snabbt, säkert och helt webbläsarbaserat.
Text till hex
Konvertera text till hexadecimal representation utan ansträngning