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;
}
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;
}
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 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.
- 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
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios