Las animaciones CSS son geniales y el concepto es bastante simple. Nombra la animación, define el movimiento en @keyframes y luego llamar a esa animación en un elemento. Si no ha trabajado con ellos, puede subir de nivel en la sintaxis aquí mismo en el Almanaque.
Si bien el concepto es simple, existen pequeños trucos para hacer que las animaciones parezcan complejas y uno de ellos son las transiciones de varios pasos. Eso es lo que veremos en esta publicación.
Un fotograma clave puede ser un “paso”
Si configuramos una animación de fotogramas clave para cambiar el color de fondo de un elemento para cambiar de naranja a negro (porque el naranja es el nuevo negro, después de todo) al pasar el mouse durante cinco segundos, hará exactamente eso. Dividirá ese cambio con el tiempo y hará la transición.
body {
background: black;
animation: color-me-in 5s; /* other keywords like "infinite alternate" can be useful here */
}
@keyframes color-me-in {
/* You could think of as "step 1" */
0% {
background: orange;
}
/* You could think of as "step 2" */
100% {
background: black;
}
}Vea Pen ZbePzr de Programar Plus(@ css-tricks) en CodePen.
Podemos agregar tantos pasos como queramos en una animación de fotogramas clave. Por ejemplo, aquí se agrega azul justo en el medio de la transición.
@keyframes color-me-in {
0% {
background: orange;
}
/* Adding a step in the middle */
50% {
background: blue;
}
100% {
background: black;
}
}Vea Pen meWoyy de Programar Plus(@ css-tricks) en CodePen.
Ese es el concepto de animaciones de varios pasos en pocas palabras: más de un cambio tiene lugar en la animación de principio a fin.
Los fotogramas clave se interpolan y se interpolan, a menos que no desee que se
Observe que los colores de arriba se desvanecen entre sí en cada uno de los pasos. Eso es un buen valor predeterminado. Incluso se “relajan” entre sí, ya que ese es el valor predeterminado animation-timing-function, otro buen valor predeterminado, ya que es una sensación mucho más suave y relajada que la sensación de computadora linear en general, aunque todo tiene su utilidad.
Con la función steps () puede forzar la interpolación para que sea un número exacto de fotogramas clave. Manifestación:
Vea Pen bEdKaW de Programar Plus(@ css-tricks) en CodePen.
Uso de animaciones de varios pasos
Un buen ejemplo es el ecualizador de sonido de Apple Music. Es probable que lo hayas visto o al menos algo parecido: una serie de barras verticales que se mueven hacia arriba y hacia abajo de una manera que da la ilusión de que baila al ritmo de la música.
Aquí hay una versión inmóvil de lo que estamos hablando:
Vea el ecualizador de sonido Pen Apple Music en SVG por Programar Plus(@ css-tricks) en CodePen.
Cinco barras verticales y quiero animarlas moviéndose hacia arriba y hacia abajo a varias alturas. Creemos una animación llamada equalize con 25 pasos de fotogramas clave. Eso es un paso por cada 4% de la animación, que luego se llama a la .bar elemento:
Vea el ecualizador de sonido Pen Apple Music en SVG por Programar Plus(@ css-tricks) en CodePen.
Genial, pero todos se mueven al mismo ritmo al mismo tiempo. No es exactamente un ecualizador genial para mirar. Sin embargo, podemos agregar una animation-duration a cada .bar cuando se llama a la animación para dar el efecto de que se mueven a diferentes ritmos.
Vea el ecualizador de sonido Pen Apple Music en SVG de Geoff Graham (@geoffgraham) en CodePen.
¡Ahí lo tenemos! Un ecualizador que, cuando está activo, parece que podría moverse al ritmo de una canción, aunque estamos usando la misma animación de varios pasos en cada elemento.
Y aquí hay una alternativa que juega con animation-delay (valores negativos, por lo que todos comienzan al mismo tiempo) en su lugar:
Vea el ecualizador de sonido Pen Apple Music en SVG por Programar Plus(@ css-tricks) en CodePen.
Pero espera, también hay varios pasos. transition¡s!
Transitions son como animaciones más simples. Se mueven de un conjunto fijo de propiedades a otro. La taquigrafía:
.move-me {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}Y, al igual que animation podemos animar el mismo conjunto de propiedades.
Hagamos la transición de un cuadro rojo a un rectángulo naranja al pasar el mouse encadenando el background-color y width propiedades:
.box {
width: 150px;
height: 150px;
background-color: red;
transition: 1s;
}
.box:hover {
width: 300px;
background-color: orange;
}Esto le dice a nuestro .box elemento para hacer la transición tanto width y background-color propiedades al pasar el mouse y hacer la transición en un segundo.
Consulte la propiedad de transición de CSS de la pluma de Geoff Graham (@geoffgraham) en CodePen.
Todavía no es exactamente de varios pasos, ¡pero es posible!
Agregar varios pasos a las transiciones
Podemos hacer las cosas un poco más interesantes encadenando nuestras transiciones usando comas, luego jugando con la duración y el retraso de las mismas para crear el mismo tipo de efecto de movimiento de varios pasos que es posible en la animación de fotogramas clave.
Tomemos el ejemplo anterior y hagamos que cambie el ancho y luego, una vez hecho, cambie el color.
.box {
transition:
/* step 1 */
width 1s,
/* step 2 */
background 0.5s 1s;
}Consulte la propiedad de transición de CSS del lápiz mediante Programar Plus(@ css-tricks) en CodePen.
Podemos ser mucho más elegantes aquí y coreografiar movimientos adicionales.
- Cambiar el ancho de
150pxa300pxinmediatamente al pasar el mouse durante 1 segundo - Cambiar el
background-colorde rojo a naranja inmediatamente durante 1 segundo - Agrega un
box-shadowy cambie la dirección de la misma inmediatamente al pasar el mouse durante 1 segundo - Agregue una línea de texto que se desvanece y se desplaza hacia la izquierda después de la
widthyheight have transitioned - Agregue otra línea de texto que aparece y se desliza desde la derecha después de que la primera línea de texto ha desaparecido
¡Podemos hacer esto encadenando nuestras transiciones en cada elemento donde hay múltiples propiedades para la transición!
/* Our box element */
.box {
width: 150px;
height: 150px;
background-color: red;
box-shadow: 5px 5px 25px #000;
transition: all 1s;
}
/* On hover... */
.box:hover {
/* Increase width */
width: 300px;
/* Change color */
background-color: orange;
/* Move the shadow */
box-shadow: -5px 5px 25px #000;
}
/* The first line of text */
.box__blurb {
/* Start with full opacity and centered */
opacity: 1;
transform: translateX(45px);
/* Then transition these chained properties */
transition:
opacity 0.5s 2s,
transform 0.5s 0.5s;
}
/* On .box hover... */
.box:hover .box__blurb {
/* Fade out */
opacity: 0;
/* Move over to the right */
transform: translateX(-500px);
}
/* The second line of text */
.rect__blurb {
/* Start with no opacity and pushed off the element */
opacity: 0;
transform: translateX(500px);
/* Then transition these chained properties */
transition:
opacity 0.5s 1s,
transform 0.5s 1s;
}
/* On .box hover... */
.box:hover .rect__blurb {
/* Face in */
opacity: 1;
/* While entering from the right */
transform: translateX(-100px);
}Esto es lo que tenemos. Se agregaron algunas florituras para la presentación:
Consulte las transiciones de varios pasos de la pluma de Geoff Graham (@geoffgraham) en CodePen.
Aquí hay otro ejemplo de un botón en el que todos los efectos de desplazamiento se organizan claramente en pasos:
Vea el Pen zrGvaq de Chris Coyier (@chriscoyier) en CodePen.
Terminando
Las animaciones y transiciones de varios pasos son pequeños trucos divertidos que tenemos a nuestra disposición para crear un movimiento rico y dinámico en CSS. El ejemplo de un ecualizador en esta publicación es una aplicación práctica, pero hay muchas otras formas en que se pueden utilizar las transiciones de varios pasos. De hecho, Ana Tudor los usó para hacer una animación alucinante en una publicación que publicó aquí sobre CSS-Tricks. Rémi Lacorne también tiene un dulce ejemplo de transiciones.
¿Dónde ha utilizado transiciones y animaciones de varios pasos en sus animaciones CSS? ¿Has hecho algo súper y complejo que muestre tus habilidades de animación? ¿O quizás un toque sutil que mejore la experiencia del usuario? Háznoslo saber en los comentarios.