Lección 20: Transition | Curso CSS

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

Actividad 1

Construye un formulario con los siguientes campos:

  • Nombre, tipo texto.
  • Teléfono, tipo número.
  • Botón de enviar.

Cuando tenga el foco los 2 primeros campos, nombre o teléfono, desvanece sus bordes con una suave transición y aumenta ligeramente su tamaño para que se lea mejor.

En cambio el botón debe perder su color de fondo cuando el cursor esté por encima.

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 liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario