Generatore di transizioni CSS3

Transizione di opacità uniforme

Preset popolari

Effetto dissolvenza

Transizione di opacità uniforme

Effetto scala

Ridimensiona l'elemento al passaggio del mouse

Effetto di rotazione

Ruota l'elemento al passaggio del mouse

Effetto scivolata

Sposta la posizione dell'elemento

Cambio colore

Transizione del colore di sfondo

Informazioni sulle transizioni

Le transizioni CSS consentono di modificare i valori delle proprietà in modo fluido, per un determinato periodo di tempo.

Le proprietà animate più comuni includono:

  • larghezza, altezza
  • margine, spaziatura interna
  • di opacità, di colore
  • transform (scale, rotate, translate)
  • background-color

Suggerimento: utilizza l'opzione "Tutte le proprietà" per animare tutte le modifiche.

Preview

HOVER ME

Codice generato

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

Controlli di transizione

300
0

Effetti al passaggio del mouse

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

Related Tools