CSS3 Transition Generator

Jævn opacitetsovergang

Populære forudindstillinger

Udtoningseffekt

Udjævn opacitetsovergang

Skaler effektTilpas

element ved pegning

Roter effekt

Roter element ved pegning

Slideeffekt

Flyt elementplacering

Farve Skift

baggrundsfarveovergang

Om overgange

CSS-overgange giver dig mulighed for at ændre egenskabsværdier jævnt over en given varighed.

Almindelige animerede egenskaber omfatter:

  • bredde, højdemargen
  • , padding
  • opacitet, farve
  • transform (scale, rotate, translate)
  • background-color

Pro Tip: Brug indstillingen 'Alle egenskaber' til at animere alle ændringer.

Preview

HOVER ME

Genereret kode

.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; }  .element:hover { /* Hover styles will be generated here */ }

Overgang Kontrolelementer

300
0

Svæveeffekter

100%
100%
0px
0px
8px
8px

Related Tools