Con el propósito de especificar la duración de cambios
en los elementos de páginas web, definiremos
los tiempos de una transición en un documento CSS, según las reglas de este
lenguaje. Algunos creadores de proyectos para internet, por desconocimiento de
las diferentes velocidades para una transición, obtienen resultados simples sin
llamar la correcta atención del usuario. Debido a ello, identificaremos los
diferentes valores para la propiedad transition-timing-function.
Para agregar mayor dinamismo a las
transiciones, existe la propiedad transition-timing-function,
mediante la cual especificamos la velocidad del cambio. En algunas
ocasiones es confundida con la propiedad básica transition-duration, sin embargo esta permite delimitar la duración
de la transición.
061-01_0802_ilu01.
Definición de las propiedades de transición
Existen diferentes valores
predeterminados para la propiedad transition-timing-function,
dentro de los cuales están:
- Ease: define una velocidad lenta, luego rápida y finaliza lenta.
- Linear: define una velocidad constante a lo largo de la duración.
- Ease-in: define una velocidad lenta al inicio y luego rápida al
final.
- Ease-out: define una velocidad rápida al comienzo y finaliza lenta.
- Ease-in-out: define una velocidad lenta cuando comienza, luego acelera
un poco, sin embargo, sin rapidez como ease,
y por último vuelve a un ritmo lento.
061-01_0802_ilu02.
Valores para la propiedad transition-timing-function
La velocidad de las transiciones
son expresadas con una curva, a fin de visualizar cómodamente la trayectoria
del cambio. En la ilustración tenemos tres valores diferentes, sin embargo, los
explicados anteriormente también se representan de la misma forma, sin embargo,
el resultado de la curva será diferente:
061-01_0802_ilu03.
Curvas de demostración para una transición
- Steps(#, start|end): dentro de los paréntesis especificamos el
número de pasos, y las palabras reservadas start
y end son para definir si ocurre
el cambio al inicio o al final, por lo tanto la imagen formada es una escalera
con cinco pasos, donde la línea plana representa lentitud y la vertical es
rapidez.
- step-start: especificamos en un paso inicia la transición, por lo tanto
de forma rápida se produce el cambio.
- step-end: definimos en un paso finaliza la transición, motivo por el cual
también se produce el cambio de forma rápida.
Las transiciones donde especificamos
pasos precisos son de gran utilidad al momento de movilizar de forma exacta
algunos elementos hasta formar un animación personalizada.
Keynotes
- Para agregar mayor dinamismo a las
transiciones, existe la propiedad transition-timing-function,
mediante la cual especificamos la velocidad del cambio.
- La velocidad de las transiciones son
expresadas con una curva, a fin de visualizar cómodamente la trayectoria del
cambio.
- Las transiciones donde especificamos pasos
precisos son de gran utilidad al momento de movilizar de forma exacta algunos
elementos hasta formar un animación personalizada.
RetoDefine tres tiempos diferentes para una transición
en un documento CSS, según las reglas de este lenguaje. Expresa cada transición
utilizada mediante una curva.
¡Comparte el resultado final del reto en tu vProfile y pide a un experto que realice
un comentario de optimización!
Tiempo disponible: entre 15 y 30minutos.
CierreLa definición de tiempos específicos para una transición
en un documento CSS, conlleva a la obtención de resultados deseados cuando
personalizamos una página web.
También, tenemos la capacidad de especificar la duración de cambios vistosos en
elementos de un proyecto para internet. Con paciencia y determinación, seremos
precisos en los tiempos y modos de ejecución en cuanto a las transiciones de
CSS.
