Lección 21: 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;
}
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;
}
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.
Retardo
Tiempo que tardará en empezar.
.elemento {
/* Por defecto */
transition-delay: 0s;
/* 1 segundo */
transition-delay: 1s;
}
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.
¿Me ayudas?
No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios