Lección 20: Transition

Para crear una transición entre 2 estados, como puede ser un elemento en reposo que se activo su pseudo clase hover, disponemos de diferentes configuraciones.

Duración

Tiempo que durará la transición.

.elemento {
  /* Por defecto */
  transition-duration: 0s;

  /* 2 segundos */
  transition-duration: 2s;
}

Más información

Propiedad

Define a que propiedad deseas aplicar la transición.

.elemento {
  /* Por defecto */
  transition-property: all;

  /* Solo a una propiedad, como la anchura */
  transition-property: width;
}

Más información

Función de tiempo

Función que define la curva de la animación.

.elemento {
  /* Por defecto */
  transition-timing-function: ease;

  /* Otras funciones prestablecidas */
  transition-timing-function: ease-in;
  transition-timing-function: ease-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: linear;
  
  
  /* A medida */
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Puedes interactuar con varios ejemplos, e incluso descubrir nuevos, en easings.net.

Más información

Retardo

Tiempo que tardará en empezar.

.elemento {
  /* Por defecto */
  transition-delay: 0s;

  /* 1 segundo */
  transition-delay: 1s;
}

Más información

19-1

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario