Generador de transiciones CSS3

Transición de opacidad suave

preestablecidos

de desvanecimiento

de opacidad suave

Efecto de escala Cambiar

el tamaño del elemento al pasar el cursor

Efecto de

Rotar elemento al pasar el cursor

Efecto de deslizamiento

Mover la posición

Cambio

color de fondo

Acerca de las

transiciones CSS le permiten cambiar los valores de las propiedades sin problemas, durante un período determinado.

Las propiedades comúnmente animadas incluyen:

  • ancho, alto
  • , margen, opacidad del relleno
  • , color
  • transform (scale, rotate, translate)
  • background-color

Consejo profesional: Utilice la opción 'Todas las propiedades' para animar todos los cambios.

Preview

HOVER ME

Código

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

Transición Controla

300
0

Efectos

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

Related Tools