Soy un gran fan de las transiciones CSS. Claro, se puede abusar de ellos, pero en general son una forma excelente y fácil de agregar un poco de vida a sus páginas web. Y seamos sinceros, son divertidos para jugar.
He cubierto las transiciones de un millón de maneras diferentes, pero hay una característica que casi nunca toco: los retrasos de transición. ¿Por qué querrías retrasar tu transición? Resulta que los efectos que puedes lograr se vuelven mucho más complejos e impresionantes cuando incorporas este parámetro adicional. Vamos a saltar y construir algunas demostraciones geniales para mostrar cómo funciona.
Lo que estamos construyendo
Si desea echar un vistazo a lo que construiremos hoy, consulte las tres demostraciones a continuación:
- Mensaje secuencial
- Una carta a la vez
- Efecto cortina
La sintaxis
Antes de saltar a la construcción de algo, vale la pena refrescarnos con la sintaxis de transición de CSS. Hay cuatro parámetros diferentes asociados con las transiciones en CSS: propiedad, duración, función de temporización y retardo.
Puede establecer los valores para cada una de estas propiedades individualmente utilizando la siguiente sintaxis. Tenga en cuenta que querrá ejecutar este código a través de Prefixr para asegurarse de que ha cubierto los distintos navegadores.
Aunque esta es la forma más directa de declarar una transición, es realmente una forma horriblemente voluminosa de hacerlo. Cuando tomamos en cuenta todos los diversos prefijos requeridos, esta porción de código se vuelve enorme:
Como puede ver, este es un montón de código para una transición simple. Por esta razón, los codificadores suelen utilizar la versión abreviada mucho más concisa. Con este método, podemos tomar la gran parte del código de arriba y convertirlo en el siguiente fragmento, mucho más manejable.
La sintaxis de la taquigrafía
Para estar seguros de que todos estamos en la misma página, aquí hay un desglose visual de la taquigrafía de transición.
Como puede ver, el método tradicional es enumerar la propiedad en la que desea habilitar la transición, seguido por la duración de la transición, la función de aceleración y, finalmente, el retraso. Sin embargo, esta sintaxis no es muy estricta. Por ejemplo, puede cambiar la posición de la función de aceleración y la demora y la transición seguirán funcionando. Sin embargo, el orden que se muestra arriba es de la especificación oficial, así que recomiendo seguirlo.
Una cosa que hago con frecuencia es dejar la propiedad de retraso. El valor predeterminado es cero segundos, por lo que en el caso de que no desee demora, simplemente puede escribir lo siguiente:
El poder de los retrasos en la transición
Ahora que entendemos la sintaxis de las transiciones, hablemos de por qué en el mundo querría un retraso en una transición. Puede haber varias razones por las que podría querer usar esta propiedad, pero en la que me centraré hoy es lograr animaciones complejas que involucran varios pasos. Hemos jugado con transiciones de varios pasos un poco en artículos anteriores, pero hoy vamos a divertirnos un poco.
Básicamente, el concepto aquí es que desencadena dos o más transiciones en un evento, pero usa demoras para hacer que ocurran en diferentes momentos. Entonces, digamos que tenemos nuestra primera transición programada para durar un segundo, luego podemos establecer un retraso de un segundo en nuestra segunda transición para que comience tan pronto como termine la primera. ¡Los resultados pueden ser bastante impresionantes!
Mensaje secuencial
La primera idea que aparece en mi cabeza para utilizar demoras es configurar algún tipo de mensaje que se presente al usuario pieza por pieza. Digamos que queremos tener tres piezas de texto que vuelan dentro y fuera de un div en diferentes momentos. El primer paso es establecer cómo funciona todo para que pueda envolver su mente a su alrededor.
- Mensaje predeterminado: "¿Desplácese aquí?"
- ¿Una segunda mosca saliendo de? ¿Flotar aquí?
- Espera un segundo, luego vuela en el segundo mensaje: "¡Saludos!"
- Espera dos segundos, luego vuela en el tercer mensaje: "¿Cómo estás?"
- Desplazar hacia fuera vuelve al mensaje predeterminado
Como puede ver, primero le indicamos al usuario que se desplace sobre el div, luego salga volando el mensaje de desplazamiento cuando llegan dos mensajes más, el primero de los cuales esperará un segundo y el segundo esperará dos segundos.
HTML
Para dar vida a esta demostración, necesitamos un div que contenga tres párrafos diferentes como tal. Obviamente, si estuvieras usando este es un proyecto en vivo, querrías aplicar una clase o ID, pero lo mantendré simple aquí.
CSS
Para iniciar el CSS, diseñaremos el div y los párrafos. Hay algunas cosas importantes a considerar aquí.Primero, observe la posición relativa y el desbordamiento oculto en la división, estos son importantes, así que asegúrese de incluirlos.
A continuación, observe que he posicionado absolutamente los elementos de texto y los he empujado hacia arriba y fuera de los límites del div para que no sean visibles de forma predeterminada. También incluí un efecto Sass 3D de lujo completamente opcional. Para la mezcla completa, echa un vistazo a este artículo.
Ahora es el momento de colocar nuestro primer párrafo en su lugar y crear nuestra primera transición. Para hacer esto, usaremos el selector nth-child para apuntar al primer párrafo ("¿Desplazar aquí?). Colóquelo a cincuenta píxeles de la parte superior, agregue una transición de un segundo sin demora y cree un efecto de desplazamiento que lo aleje de la vista.
Para finalizar esta demostración, necesitamos crear un evento de desplazamiento para los párrafos segundo y tercero. Son básicamente los mismos, solo asegúrate de que los? Saludos? El párrafo tiene un retraso de un segundo y el "¿Cómo estás?" El párrafo tiene un retraso de dos segundos. También asegúrese de colocar el último párrafo más abajo.
Demo en vivo
¡Eso es todo al respecto! Ahora vamos a ver la demostración en vivo en Tinkerbin. ¡Aquí podrás ver y modificar el código, asegúrate de jugar y ver qué puedes hacer!
Manifestación: Haga clic aquí para lanzar. Tenga en cuenta que tendrá que cambiar el modo CSS a? Sass? y pulsa? correr? Para ver el efecto de texto 3D.
Una letra a la vez
Para este, solo vamos a usar un solo mensaje. Sin embargo, cada letra del mensaje llegará volando en su lugar individualmente. El resultado será realmente genial y muy diferente de lo que tradicionalmente se hace con CSS.
HTML
Desafortunadamente, CSS no tiene una gran manera de apuntar letras individuales en una cadena (aún), por lo que nuestro HTML tiene que ensuciar todo con los tramos. Es un dolor y el código parece un poco descuidado, pero es lo mejor que podemos hacer sin traer JavaScript a la imagen, que está fuera del alcance de este tutorial.
CSS
Nuestra primera parte de CSS configurará nuestra división, al igual que la última vez, y estilizará las letras. Estoy usando la fuente web de Google? Bree Serif ?. También puse la opacidad en 0, la posición en absoluta y transformé el texto en mayúsculas.
Ahora tenemos que aplicar una transición diferente a cada letra individual. Para lograr esto, use nth-child como la última vez y apunte a los tramos. Observe cómo la diferencia principal aquí es que el retraso se reduce cada vez, comenzando en 0,4 segundos y bajando a 0.
Para finalizar esto, primero debemos declarar qué sucede cuando pasamos el ratón por encima del div. Establecí los vanos para tener una opacidad de 1, los traje desde la izquierda y los giré 360 grados para que giren en su lugar.
A partir de aquí, todo lo que queda es empujar cada letra individual en su lugar en el hover. Con eso finalizado, un solo evento flotante hará que todas las letras se vuelvan visibles y giren en su lugar, y nuestros retrasos garantizarán que todo esto suceda de forma secuencial.
Demo en vivo
Con eso, todos hemos terminado. Asegúrate de pasar por la demostración que aparece a continuación y pasar el cursor sobre el div para ver la animación y modificarla para tus propios usos.
Manifestación: Haga clic aquí para lanzar.
Efecto cortina
Ahora ya entiendes cómo funciona todo, así que no te aburriré con más explicaciones, pero se me ocurrió una demo más que me pareció divertida. Este utiliza una pila de imágenes que gradualmente desaparecen para revelar la imagen final en la parte inferior de la pila. Es un efecto de cortina escalonada que definitivamente es mucho más de lo que cabría esperar en un solo evento de desplazamiento de CSS.
Manifestación: Haga clic aquí para lanzar.
¿Cómo se utilizan los retrasos de transición?
Ahora que ha visto algunas de las ideas que he tenido para usar creativamente los retrasos de transición, me encantaría ver qué ha encontrado. Deja un enlace a continuación y muéstrame lo que tienes!