Imagínese esto: se une a un nuevo proyecto, se sumerge en el código base y, en las primeras horas, descubre algo frustrantemente familiar. Distribuidas por las hojas de estilo, encontrará múltiples definiciones de @keyframes para las mismas animaciones básicas. Tres efectos de aparición gradual diferentes, dos o tres variaciones de diapositivas, un puñado de animaciones de zoom y al menos dos animaciones de giro diferentes porque, bueno, ¿por qué no? @keyframes pulso { de { escala: 1; } a { escala: 1,1; } }
@keyframes pulso más grande { 0%, 20%, 100% { escala: 1; } 10%, 40% { escala: 1,2; } }
Si este escenario le resulta familiar, no está solo. Según mi experiencia en varios proyectos, uno de los logros rápidos más consistentes que puedo lograr es consolidar y estandarizar fotogramas clave. Se ha convertido en un patrón tan confiable que ahora espero con ansias esta limpieza como una de mis primeras tareas en cualquier código base nuevo. La lógica detrás del caos Esta redundancia tiene mucho sentido si lo piensas. Todos utilizamos las mismas animaciones fundamentales en nuestro trabajo diario: fundidos, diapositivas, zooms, giros y otros efectos comunes. Estas animaciones son bastante sencillas y es fácil crear una definición rápida de @keyframes para realizar el trabajo. Sin un sistema de animación centralizado, los desarrolladores escriben naturalmente estos fotogramas clave desde cero, sin saber que ya existen animaciones similares en otras partes del código base. Esto es especialmente común cuando se trabaja en arquitecturas basadas en componentes (lo que la mayoría de nosotros hacemos hoy en día), ya que los equipos suelen trabajar en paralelo en diferentes partes de la aplicación. ¿El resultado? Caos de animación. El pequeño problema Los problemas más obvios con la duplicación de fotogramas clave son la pérdida de tiempo de desarrollo y la sobrecarga innecesaria de código. Múltiples definiciones de fotogramas clave significan múltiples lugares para actualizar cuando cambian los requisitos. ¿Necesitas ajustar el tiempo de tu animación de desvanecimiento? Deberá buscar todas las instancias de su código base. ¿Quiere estandarizar las funciones de facilitación? Buena suerte encontrando todas las variaciones. Esta multiplicación de puntos de mantenimiento hace que incluso las actualizaciones de animaciones simples sean una tarea que requiere mucho tiempo. El problema más grande Esta duplicación de fotogramas clave crea un problema mucho más insidioso que se esconde debajo de la superficie: la trampa del alcance global. Incluso cuando se trabaja con arquitecturas basadas en componentes, los fotogramas clave CSS siempre se definen en el ámbito global. Esto significa que todos los fotogramas clave se aplican a todos los componentes. Siempre. Sí, su animación no utiliza necesariamente los fotogramas clave que definió en su componente. Utiliza los últimos fotogramas clave que coinciden exactamente con el mismo nombre que se cargaron en el ámbito global. Siempre que todos los fotogramas clave sean idénticos, esto puede parecer un problema menor. Pero en el momento en que quieras personalizar una animación para un caso de uso específico, estarás en problemas o, peor aún, serás tú quien los cause. O su animación no funcionará porque otro componente se cargó después del suyo, sobrescribiendo sus fotogramas clave, o su componente se carga al final y accidentalmente cambia el comportamiento de la animación para todos los demás componentes que usan el nombre de ese fotograma clave, y es posible que ni siquiera se dé cuenta. Aquí hay un ejemplo simple que demuestra el problema: .componente-uno { /* estilos de componentes */ animación: pulso 1s de entrada y salida infinita alternativa; }
/* esta definición de @keyframes no funcionará */ @keyframes pulso { de { escala: 1; } a { escala: 1,1; } }
/* más adelante en el código... */
.componente-dos { /* estilos de componentes */ animación: pulso 1s de entrada y salida infinita; }
/* estos fotogramas clave se aplicarán a ambos componentes */ @keyframes pulso { 0%, 20%, 100% { escala: 1; } 10%, 40% { escala: 1,2; } }
Ambos componentes usan el mismo nombre de animación, pero la segunda definición de @keyframes sobrescribe la primera. Ahora, tanto el componente uno como el componente dos usarán los segundos fotogramas clave, independientemente de qué componente definió qué fotogramas clave. Vea los tokens de fotogramas clave de lápiz: demostración 1 [bifurcado] de Amit Sheen. ¿La peor parte? Esto a menudo funciona perfectamente en el desarrollo local, pero se interrumpe misteriosamente en la producción cuando los procesos de compilación cambian el orden de carga de las hojas de estilo. Termina con animaciones que se comportan de manera diferente según los componentes que se cargan y en qué secuencia. La solución: fotogramas clave unificados La respuesta a este caos es sorprendentemente simple: fotogramas clave dinámicos predefinidos almacenados en una hoja de estilo compartida. En lugar de dejar que cada componente defina sus propias animaciones, creamos fotogramas clave centralizados que están bien documentados, son fáciles dede uso, mantenible y adaptado a las necesidades específicas de su proyecto. Piense en ello como tokens de fotogramas clave. Así como usamos tokens para colores y espaciado, y muchos de nosotros ya usamos tokens para propiedades de animación, como duración y funciones de aceleración, ¿por qué no usar tokens también para fotogramas clave? Este enfoque puede integrarse naturalmente con cualquier flujo de trabajo de token de diseño actual que esté utilizando, mientras resuelve tanto el problema pequeño (duplicación de código) como el problema más grande (conflictos de alcance global) de una sola vez. La idea es sencilla: crear una única fuente de verdad para todas nuestras animaciones comunes. Esta hoja de estilo compartida contiene fotogramas clave cuidadosamente elaborados que cubren los patrones de animación que realmente utiliza nuestro proyecto. Ya no tendrás que adivinar si ya existe una animación de desvanecimiento en algún lugar de nuestro código base. No más sobrescribir accidentalmente animaciones de otros componentes. Pero aquí está la clave: estas no son sólo animaciones estáticas de copiar y pegar. Están diseñados para ser dinámicos y personalizables a través de propiedades personalizadas de CSS, lo que nos permite mantener la coherencia y al mismo tiempo tener la flexibilidad de adaptar animaciones a casos de uso específicos, como si necesitara una animación de "pulso" un poco más grande en un solo lugar. Construyendo el primer token de fotogramas clave Uno de los primeros frutos maduros que debemos abordar es la animación de “aparición gradual”. En uno de mis proyectos recientes, encontré más de una docena de definiciones de aparición gradual separadas y sí, todas simplemente animaron la opacidad de 0 a 1. Entonces, creemos una nueva hoja de estilo, llamémosla kf-tokens.css, importemosla a nuestro proyecto y coloquemos nuestros fotogramas clave con los comentarios adecuados dentro de ella. /* tokens-fotogramas clave.css */
/* * Fade In: animación de entrada gradual. * Uso: animación: kf-fade-in 0.3s de salida gradual; */ @keyframes kf-fade-in { de { opacidad: 0; } a { opacidad: 1; } }
Esta única declaración @keyframes reemplaza todas esas animaciones de aparición gradual dispersas en nuestro código base. Limpio, simple y aplicable globalmente. Y ahora que tenemos este token definido, podemos usarlo desde cualquier componente de nuestro proyecto: .modal { animación: kf-fade-in 0,3 s de salida gradual; }
.información sobre herramientas { animación: kf-fade-in 0.2s facilidad de entrada y salida; }
.notificación { animación: kf-fade-in 0,5 s de salida gradual; }
Vea los tokens de fotogramas clave de lápiz: demostración 2 [bifurcado] de Amit Sheen. Nota: Estamos usando un prefijo kf- en todos nuestros nombres @keyframes. Este prefijo sirve como un espacio de nombres que evita conflictos de nombres con animaciones existentes en el proyecto y deja claro de inmediato que estos fotogramas clave provienen de nuestro archivo de tokens de fotogramas clave. Hacer una diapositiva dinámica Los fotogramas clave de aparición gradual de kf funcionan muy bien porque son simples y hay poco espacio para estropear las cosas. Sin embargo, en otras animaciones necesitamos ser mucho más dinámicos y aquí podemos aprovechar el enorme poder de las propiedades personalizadas de CSS. Aquí es donde los tokens de fotogramas clave realmente brillan en comparación con las animaciones estáticas dispersas. Tomemos un escenario común: animaciones "deslizantes". ¿Pero deslizarse desde dónde? ¿100 px desde la derecha? ¿50% de izquierda? ¿Debería ingresar desde la parte superior de la pantalla? ¿O tal vez flotar desde el fondo? Hay tantas posibilidades, pero en lugar de crear fotogramas clave separados para cada dirección y cada variación, podemos crear un token flexible que se adapte a todos los escenarios: /* * Slide In: animación de diapositiva direccional * Utilice --kf-slide-from para controlar la dirección * Predeterminado: se desliza desde la izquierda (-100%) * Uso: * animación: kf-slide-in 0.3s de salida gradual; * --kf-slide-from: -100px 0; // deslizar desde la izquierda * --kf-slide-from: 100px 0; // deslizar desde la derecha * --kf-slide-from: 0 -50px; // deslizar desde arriba */
@keyframes kf-deslizamiento { de { traducir: var(--kf-slide-from, -100% 0); } a { traducir: 0 0; } }
Ahora podemos usar este único token @keyframes para cualquier dirección de diapositiva simplemente cambiando la propiedad personalizada --kf-slide-from: .barra lateral { animación: kf-slide-in 0,3 s de salida; /* Utiliza el valor predeterminado: se desliza desde la izquierda */ }
.notificación { animación: kf-slide-in 0,4 s de salida; --kf-slide-from: 0 -50px; /* deslizar desde arriba */ }
.modal { animación: kf-fundido en 0,5 s, kf-deslizante 0,5 s cúbico-bezier (0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* deslizar desde abajo a la derecha */ }
Este enfoque nos brinda una flexibilidad increíble mientras mantenemos la coherencia. Una declaración de fotograma clave, infinitas posibilidades. Vea los tokens de fotogramas clave de lápiz: demostración 3 [bifurcados] de Amit Sheen. Y si queremos hacer nuestras animaciones aún más flexibles, permitiendo también efectos de “deslizamiento”, podemossimplemente agregue una propiedad personalizada --kf-slide-to, similar a lo que veremos en la siguiente sección. Fotogramas clave de zoom bidireccional Otra animación común que se duplica en todos los proyectos son los efectos de "zoom". Ya sea que se trate de un aumento sutil para los mensajes de brindis, un acercamiento dramático para los modales o un suave efecto de reducción para los títulos, las animaciones de zoom están en todas partes. En lugar de crear fotogramas clave separados para cada valor de escala, creemos un conjunto flexible de fotogramas clave kf-zoom:
/* * Zoom - animación a escala * Utilice --kf-zoom-from y --kf-zoom-to para controlar los valores de escala * Predeterminado: amplía del 80% al 100% (0,8 a 1) * Uso: * animación: kf-zoom 0,2 s de liberación gradual; * --kf-zoom-desde: 0,5; --kf-zoom-a: 1; // ampliar del 50% al 100% * --kf-zoom-desde: 1; --kf-zoom-a: 0; // ampliar del 100% al 0% * --kf-zoom-desde: 1; --kf-zoom-a: 1.1; // ampliar del 100% al 110% */
@keyframes kf-zoom { de { escala: var(--kf-zoom-from, 0,8); } a { escala: var(--kf-zoom-to, 1); } }
Con una definición, podemos lograr cualquier variación de zoom que necesitemos: .tostada { animación: kf-deslizante 0,2 s, kf-zoom 0,4 s de liberación gradual; --kf-slide-from: 0 100%; /* deslizar desde arriba */ /* Utiliza el zoom predeterminado: escala del 80% al 100% */ }
.modal { animación: kf-zoom 0,3s cúbico-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-desde: 0; /* zoom dramático de 0% a 100% */ }
.encabezado { animación: kf-fundido en 2s, kf-zoom 2s fácil de entrar; --kf-zoom-desde: 1.2; --kf-zoom-a: 0,8; /* reducción suave de la escala */ }
El valor predeterminado de 0,8 (80%) funciona perfectamente para la mayoría de los elementos de la interfaz de usuario, como mensajes de brindis y tarjetas, y sigue siendo fácil de personalizar para casos especiales. Vea los tokens de fotogramas clave de lápiz: demostración 4 [bifurcado] de Amit Sheen. Es posible que hayas notado algo interesante en los ejemplos recientes: hemos estado combinando animaciones. Una de las principales ventajas de trabajar con tokens @keyframes es que están diseñados para integrarse perfectamente entre sí. Esta suave composición es intencional, no accidental. Analizaremos la composición de la animación con más detalle más adelante, incluyendo dónde pueden volverse problemáticas, pero la mayoría de las combinaciones son sencillas y fáciles de implementar. Nota: Mientras escribía este artículo, y tal vez porque lo escribí, me encontré reconsiderando toda la idea de las animaciones de entrada. Con todos los avances recientes en CSS, ¿todavía los necesitamos? Afortunadamente, Adam Argyle exploró las mismas preguntas y las expresó brillantemente en su blog. Esto no contradice lo que está escrito aquí, pero presenta un enfoque que vale la pena considerar, especialmente si sus proyectos dependen en gran medida de animaciones de entrada. Animaciones continuas Mientras que las animaciones de entrada, como "atenuación", "deslizamiento" y "zoom", ocurren una vez y luego se detienen, las animaciones continuas se repiten indefinidamente para llamar la atención o indicar actividad en curso. Las dos animaciones continuas más comunes que encuentro son "giro" (para cargar indicadores) y "pulso" (para resaltar elementos importantes). Estas animaciones presentan desafíos únicos cuando se trata de crear tokens de fotogramas clave. A diferencia de las animaciones de entrada que normalmente van de un estado a otro, las animaciones continuas deben ser altamente personalizables en sus patrones de comportamiento. El doctor giratorio Cada proyecto parece utilizar múltiples animaciones de giro. Algunos giran en el sentido de las agujas del reloj y otros en el sentido contrario. Algunos hacen una sola rotación de 360 grados, otros hacen múltiples giros para un efecto más rápido. En lugar de crear fotogramas clave separados para cada variación, creemos un giro flexible que maneje todos los escenarios:
/* * Girar - animación de rotación * Utilice --kf-spin-from y --kf-spin-to para controlar el rango de rotación * Utilice --kf-spin-turns para controlar la cantidad de rotación * Predeterminado: gira de 0 grados a 360 grados (1 rotación completa) * Uso: * animación: kf-spin 1s lineal infinito; * --kf-spin-turns: 2; // 2 rotaciones completas * --kf-spin-from: 0 grados; --kf-girar a: 180 grados; // media rotación * --kf-spin-from: 0 grados; --kf-spin-to: -360deg; // en sentido antihorario */
@keyframes kf-giro { de { rotar: var(--kf-spin-from, 0deg); } a { rotar: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Ahora podemos crear cualquier variación de giro que queramos:
.cargando-spinner { animación: kf-spin 1s lineal infinito; /* Utiliza el valor predeterminado: gira de 0 grados a 360 grados */ }
.cargador rápido { animación: kf-spin 1.2s alternante infinito de entrada y salida fácil; --kf-spin-vueltas: 3; /* 3 rotaciones completas para cada dirección por ciclo*/ }
.paso-reverso { animación: kf-spin 1,5 s pasos(8) infinito; --kf-spin-to: -360deg; /* en sentido antihorario */ }
.meneo sutil { animación: kf-spin 2s fácil entrada y salida alternativa infinita; --kf-spin-desde: -16deg; --kf-spin-to: 32 grados; /* menear 36 grados: entre -18 grados y +18 grados */ }
Vea los tokens de fotogramas clave de lápiz: demostración 5 [bifurcado] de Amit Sheen. Lo bueno de este enfoque es que los mismos fotogramas clave funcionan para cargar hilanderos, rotar íconos, efectos de movimiento e incluso animaciones complejas de múltiples giros. La paradoja del pulso Las animaciones de pulso son más complicadas porque pueden "impulsar" diferentes propiedades. Algunos pulsan la escala, otros pulsan la opacidad y algunos pulsan las propiedades del color como el brillo o la saturación. En lugar de crear fotogramas clave separados para cada propiedad, podemos crear fotogramas clave que funcionen con cualquier propiedad CSS. A continuación se muestra un ejemplo de un fotograma clave de pulso con opciones de escala y opacidad:
/* * Pulso - animación pulsante * Utilice --kf-pulse-scale-from y --kf-pulse-scale-to para controlar el rango de escala * Utilice --kf-pulse-opacity-from y --kf-pulse-opacity-to para controlar el rango de opacidad * Predeterminado: sin pulso (todos los valores 1) * Uso: * animación: kf-pulse 2s alternancia infinita de entrada y salida; * --kf-pulse-scale-from: 0,95; --kf-pulse-escala-a: 1,05; // pulso de escala * --kf-pulse-opacity-from: 0,7; --kf-pulse-opacity-to: 1; // pulso de opacidad */
@keyframes kf-pulso { de { escala: var(--kf-pulse-scale-from, 1); opacidad: var(--kf-pulse-opacity-from, 1); } a { escala: var(--kf-pulse-scale-to, 1); opacidad: var(--kf-pulse-opacity-to, 1); } }
Esto crea un pulso flexible que puede animar múltiples propiedades: .llamada a la acción { animación: kf-pulse 0,6 s infinito alternativo; --kf-pulse-opacidad-desde: 0,5; /* pulso de opacidad */ }
.punto-notificación { animación: kf-pulse 0,6 s de entrada y salida infinita alternativa; --kf-pulse-scale-desde: 0,9; --kf-pulse-scale-to: 1.1; /* pulso de escala */ }
.resaltado de texto { animación: kf-pulse 1,5 s de salida infinita; --kf-pulse-scale-desde: 0,8; --kf-pulse-opacity-from: 0.2; /* pulso de escala y opacidad */ }
Vea los tokens de fotogramas clave de lápiz: demostración 6 [bifurcado] de Amit Sheen. Este fotograma clave único de kf-pulse puede manejar todo, desde sutiles captaciones de atención hasta destacados dramáticos, y al mismo tiempo es fácil de personalizar. Flexibilización avanzada Una de las mejores cosas de usar tokens de fotogramas clave es lo fácil que es expandir nuestra biblioteca de animaciones y proporcionar efectos que la mayoría de los desarrolladores no se molestarían en escribir desde cero, como elástico o rebote. A continuación se muestra un ejemplo de un token de fotogramas clave de "rebote" simple que utiliza una propiedad personalizada --kf-bounce-from para controlar la altura del salto. /* * Rebote: animación de entrada que rebota * Utilice --kf-bounce-from para controlar la altura del salto * Predeterminado: salta desde 100vh (fuera de pantalla) * Uso: * animación: kf-bounce 3s fácil de entrar; * --kf-bounce-from: 200px; // saltar desde 200px de altura */
@keyframes kf-rebote { 0% { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { traducir: 0 0; función de sincronización de animación: relajación; } }
Las animaciones como "elásticas" son un poco más complicadas debido a los cálculos dentro de los fotogramas clave. Necesitamos definir --kf-elastic-from-X y --kf-elastic-from-Y por separado (ambos son opcionales) y juntos nos permiten crear una entrada elástica desde cualquier punto de la pantalla.
/* * Elastic In - animación de entrada elástica * Utilice --kf-elastic-from-X y --kf-elastic-from-Y para controlar la posición inicial * Predeterminado: ingresa desde la parte superior central (0, -100vh) * Uso: * animación: kf-elastic-in 2s facilita la entrada y salida de ambos; * --kf-elastic-de-X: -50px; * --kf-elastic-de-Y: -200px; // ingresa desde (-50px, -200px) */
@keyframes kf-elastic-en { 0% { traducir: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { traducir: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { traducir: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { traducir: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { traducir: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { traducir: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { traducir: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { traducir: 0 0; } }
Este enfoque facilita la reutilización y personalización de fotogramas clave avanzados en nuestro proyecto, simplemente cambiando una única propiedad personalizada.
.rebote y zoom { animación: kf-bounce 3s fácil de entrar, kf-zoom 3s lineal; --kf-zoom-desde: 0; }
.rebotar-y-deslizarse { composición de animación: agregar; /* Ambas animaciones usan traducir */ animación: kf-bounce 3s fácil de entrar, kf-slide-in 3s salida fácil; --kf-slide-from: -200px; }
.elástico-en { animación: kf-elastic-in 2s facilita la entrada y salida de ambos; }
Vea los tokens de fotogramas clave de lápiz: demostración 7 [bifurcados] de Amit Sheen. Hasta este punto, hemos visto cómo podemos consolidar fotogramas clave de forma inteligente y eficiente. Por supuesto, es posible que quieras modificar cosas para que se ajusten mejor a las necesidades de tu proyecto, pero hemos cubierto ejemplos de varias animaciones comunes y casos de uso cotidianos. Y con estos tokens de fotogramas clave implementados, ahora tenemos poderosos componentes básicos para crear animaciones consistentes y fáciles de mantener en todo el proyecto. No más fotogramas clave duplicados, no más conflictos de alcance global. Simplemente una forma limpia y conveniente de manejar todas nuestras necesidades de animación. Pero la verdadera pregunta es: ¿Cómo componemos juntos estos bloques de construcción? Poniéndolo todo junto Hemos visto que combinar tokens de fotogramas clave básicos es sencillo. No necesitamos nada especial más que definir la primera animación, definir la segunda, configurar las variables según sea necesario y listo. /* Fundido de aparición + deslizamiento de entrada */ .tostada { animación: kf-fade-in 0,4s, kf-deslizante 0,4 s cúbico-bezier (0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Acercar + desvanecerse */ .modal { animación: kf-fade-in 0,3s, kf-zoom 0,3 s cúbico-bezier (0,34, 1,56, 0,64, 1); --kf-zoom-desde: 0,7; --kf-zoom-a: 1; }
/* Deslizamiento + pulso */ .notificación { animación: kf-deslizante 0,5 s, kf-pulse 1,2 s fácil entrada y salida alternativa infinita; --kf-slide-from: -100px 0; --kf-pulse-scale-desde: 0,95; --kf-pulse-escala-a: 1,05; }
Estas combinaciones funcionan muy bien porque cada animación tiene como objetivo una propiedad diferente: opacidad, transformación (traducir/escalar), etc. Pero a veces hay conflictos y necesitamos saber por qué y cómo solucionarlos. Cuando dos animaciones intentan animar la misma propiedad (por ejemplo, ambas animan la escala o ambas animan la opacidad), el resultado no será el esperado. De forma predeterminada, sólo una de las animaciones se aplica realmente a esa propiedad, que es la última en la lista de animaciones. Esta es una limitación de cómo CSS maneja múltiples animaciones en la misma propiedad. Por ejemplo, esto no funcionará según lo previsto porque solo se aplicará la animación kf-pulse. .mala combinación { animación: kf-zoom 0,5 s hacia adelante, kf-pulso 1,2 s infinito alterno; --kf-zoom-desde: 0,5; --kf-zoom-a: 1.2; --kf-pulse-scale-desde: 0,8; --kf-pulse-scale-to: 1.1; }
Adición de animación La forma más sencilla y directa de manejar varias animaciones que afectan a la misma propiedad es utilizar la propiedad de composición de animación. En el último ejemplo anterior, la animación kf-pulse reemplaza la animación kf-zoom, por lo que no veremos el zoom inicial y no obtendremos la escala esperada de 1,2. Al configurar la composición de animación para agregar, le decimos al navegador que combine ambas animaciones. Esto nos da el resultado que queremos. .componente-dos { composición de animación: agregar; }
Vea los tokens de fotogramas clave de lápiz: demostración 8 [bifurcado] de Amit Sheen. Este enfoque funciona bien en la mayoría de los casos en los que queremos combinar efectos en la misma propiedad. También es útil cuando necesitamos combinar animaciones con valores de propiedades estáticas. Por ejemplo, si tenemos un elemento que usa la propiedad de traducción para posicionarlo exactamente donde queremos, y luego queremos animarlo con los fotogramas clave kf-slide-in, obtenemos un salto visible desagradable sin composición de animación. Vea los tokens de fotogramas clave de lápiz: demostración 9 [bifurcado] de Amit Sheen. Con la composición de animación configurada para agregar, la animación se combina suavemente con la existente.transformar, para que el elemento permanezca en su lugar y se anime como se esperaba. Animación tambalear Otra forma de manejar varias animaciones es "escalonarlas", es decir, iniciar la segunda animación un poco después de que finalice la primera. No es una solución que funcione para todos los casos, pero sí es útil cuando tenemos una animación de entrada seguida de una animación continua. /* aparición gradual + pulso de opacidad */ .notificación { animación: kf-fade-in 2s de salida gradual, kf-pulse 0,5 s 2 s alternancia infinita de entrada y salida fácil; --kf-pulse-opacity-to: 0,5; }
Vea los tokens de fotogramas clave de lápiz: demostración 10 [bifurcado] de Amit Sheen. El orden importa Gran parte de las animaciones con las que trabajamos utilizan la propiedad transform. En la mayoría de los casos, esto es simplemente más conveniente. También tiene una ventaja de rendimiento ya que las animaciones de transformación pueden acelerarse mediante GPU. Pero si usamos transformaciones, debemos aceptar que el orden en el que realizamos nuestras transformaciones es importante. Mucho. Hasta ahora, en nuestros fotogramas clave, hemos utilizado transformaciones individuales. Según las especificaciones, estos siempre se aplican en un orden fijo: primero, el elemento se traslada, luego se rota y luego se escala. Esto tiene sentido y es lo que la mayoría de nosotros esperamos. Sin embargo, si usamos la propiedad de transformación, el orden en que se escriben las funciones es el orden en que se aplican. En este caso, si movemos algo 100 píxeles en el eje X y luego lo giramos 45 grados, no es lo mismo que primero girarlo 45 grados y luego moverlo 100 píxeles. /* Cuadrado rosa: primero traduce, luego rota */ .ejemplo-uno { transformar: traducirX (100 px) rotar (45 grados); }
/* Cuadrado verde: primero rotar, luego traducir */ .ejemplo-dos { transformar: rotar (45 grados) traducirX (100 px); }
Vea los tokens de fotogramas clave de lápiz: demostración 11 [bifurcado] de Amit Sheen. Pero de acuerdo con el orden de transformación, todas las transformaciones individuales (todo lo que hemos usado para los tokens de fotogramas clave) ocurren antes de que funcione la transformación. Eso significa que todo lo que establezcas en la propiedad de transformación sucederá después de las animaciones. Pero si configura, por ejemplo, traducir junto con los fotogramas clave de kf-spin, la traducción se realizará antes de la animación. ¿Confundido todavía? Esto lleva a situaciones en las que los valores estáticos pueden provocar resultados diferentes para la misma animación, como en el siguiente caso:
/* Animación común para ambos hilanderos */ .hilador { animación: kf-spin 1s lineal infinito; }
/* Girador rosa: traducir antes de rotar (transformación individual) */ .spinner-rosa { traducir: 100% 50%; }
/* Rueda giratoria verde: rotar y luego traducir (orden de función) */ .spinner-verde { transformar: traducir (100%, 50%); }
Vea los tokens de fotogramas clave de lápiz: demostración 12 [bifurcado] de Amit Sheen. Puedes ver que la primera ruleta (rosa) obtiene una traslación que ocurre antes de la rotación de kf-spin, por lo que primero se mueve a su lugar y luego gira. La segunda rueda giratoria (verde) obtiene una función de traducción() que ocurre después de la transformación individual, por lo que el elemento primero gira, luego se mueve en relación con su ángulo actual y obtenemos ese efecto de órbita amplia. No, esto no es un error. Es solo una de esas cosas que necesitamos saber sobre CSS y tener en cuenta cuando trabajamos con múltiples animaciones o múltiples transformaciones. Si es necesario, también puede crear un conjunto adicional de fotogramas clave kf-spin-alt que rotan elementos usando la función rotar(). Movimiento reducido Y mientras hablamos de fotogramas clave alternativos, no podemos ignorar la opción "sin animación". Una de las mayores ventajas de utilizar tokens de fotogramas clave es que se puede integrar la accesibilidad y, en realidad, es bastante fácil de hacer. Al diseñar nuestros fotogramas clave teniendo en cuenta la accesibilidad, podemos garantizar que los usuarios que prefieren un movimiento reducido obtengan una experiencia más fluida y que distraiga menos, sin trabajo adicional ni duplicación de código. El significado exacto de "movimiento reducido" puede cambiar un poco de una animación a otra y de un proyecto a otro, pero aquí hay algunos puntos importantes a tener en cuenta: Silenciar fotogramas clave Si bien algunas animaciones se pueden suavizar o ralentizar, hay otras que deberían desaparecer por completo cuando se solicita un movimiento reducido. Las animaciones de pulso son un buen ejemplo. Para asegurarnos de que estas animaciones no se ejecuten en modo de movimiento reducido, simplemente podemos incluirlas en la consulta de medios adecuada.
@media (prefiere movimiento reducido: sin preferencia) { @keyfrmaes kf-pulso { de { escala: var(--kf-pulse-scale-from, 1); opacidad: var(--kf-pulse-opacity-from, 1); } a { escala: var(--kf-pulse-scale-to, 1); opacidad:var(--kf-pulse-opacity-to, 1); } } }
Esto garantiza que los usuarios que hayan configurado Preferred-Reduced-Motion en Reducir no verán la animación y obtendrán una experiencia que coincida con sus preferencias. Entrada instantánea Hay algunos fotogramas clave que no podemos eliminar simplemente, como las animaciones de entrada. El valor debe cambiar, debe animarse; de lo contrario, el elemento no tendrá los valores correctos. Pero en movimiento reducido, esta transición desde el valor inicial debería ser instantánea. Para lograr esto, definiremos un conjunto adicional de fotogramas clave donde el valor salta inmediatamente al estado final. Estos se convierten en nuestros fotogramas clave predeterminados. Luego, agregaremos los fotogramas clave normales dentro de una consulta de medios para preferir movimiento reducido configurado como sin preferencia, como en el ejemplo anterior. /* aparece instantáneamente para reducir el movimiento */ @keyframes kf-zoom { desde, hasta { escala: var(--kf-zoom-to, 1); } }
@media (prefiere movimiento reducido: sin preferencia) { /* Fotogramas clave de zoom originales */ @keyframes kf-zoom { de { escala: var(--kf-zoom-from, 0,8); } a { escala: var(--kf-zoom-to, 1); } } }
De esta manera, los usuarios que prefieren el movimiento reducido verán que el elemento aparece instantáneamente en su estado final, mientras que todos los demás obtienen la transición animada. El enfoque suave Hay casos en los que sí queremos mantener algo de movimiento, pero mucho más suave y tranquilo que la animación original. Por ejemplo, podemos reemplazar una entrada de rebote con un suave desvanecimiento.
@keyframes kf-rebote { /* Fundido suave para reducir el movimiento */ }
@media (prefiere movimiento reducido: sin preferencia) { @keyframes kf-rebote { /* Fotogramas clave de rebote originales */ } }
Ahora, los usuarios con movimiento reducido habilitado aún obtienen una sensación de apariencia, pero sin el movimiento intenso de un rebote o una animación elástica. Una vez que los componentes básicos están en su lugar, la siguiente pregunta es cómo hacerlos parte del flujo de trabajo real. Escribir fotogramas clave flexibles es una cosa, pero hacerlos confiables en un proyecto grande requiere algunas estrategias que tuve que aprender de la manera más difícil. Estrategias de implementación y mejores prácticas Una vez que tengamos una biblioteca sólida de tokens de fotogramas clave, el verdadero desafío es cómo incorporarlos al trabajo diario.
La tentación es eliminar todos los fotogramas clave a la vez y declarar que el problema está resuelto, pero en la práctica he descubierto que los mejores resultados se obtienen con una adopción gradual. Comience con las animaciones más comunes, como desvanecerse o deslizarse. Se trata de victorias fáciles que muestran un valor inmediato sin necesidad de grandes reescrituras. El nombramiento es otro punto que merece atención. Un prefijo o espacio de nombres coherente hace evidente qué animaciones son tokens y cuáles son únicas locales. También evita colisiones accidentales y ayuda a los nuevos miembros del equipo a reconocer el sistema compartido de un vistazo. La documentación es tan importante como el código mismo. Incluso un breve comentario encima de cada token de fotograma clave puede ahorrar horas de conjeturas más adelante. Un desarrollador debería poder abrir el archivo de tokens, buscar el efecto que necesita y copiar el patrón de uso directamente en su componente. La flexibilidad es lo que hace que este enfoque valga la pena. Al exponer propiedades personalizadas sensatas, damos a los equipos espacio para adaptar la animación sin dañar el sistema. Al mismo tiempo, trate de no complicarse demasiado. Proporcione las perillas que importan y mantenga al resto obstinado. Por último, recuerda la accesibilidad. No todas las animaciones necesitan una alternativa de movimiento reducido, pero muchas sí. Realizar estos ajustes temprano significa que nunca tendremos que actualizarlos más tarde, y muestra un nivel de cuidado que nuestros usuarios notarán incluso si nunca lo mencionan.
En mi experiencia, tratar los tokens de fotogramas clave como parte de nuestro flujo de trabajo de tokens de diseño es lo que hace que se mantengan. Una vez que están en su lugar, dejan de parecer efectos especiales y se convierten en parte del lenguaje de diseño, una extensión natural de cómo se mueve y responde el producto. Concluyendo Las animaciones pueden ser una de las partes más divertidas de la creación de interfaces, pero sin una estructura, también pueden convertirse en una de las mayores fuentes de frustración. Al tratar los fotogramas clave como tokens, se toma algo que suele ser complicado y difícil de gestionar y se convierte en un sistema claro y predecible. El valor real no está sólo en guardar unas pocas líneas de código. Es la confianza de que cuando utilizas un desvanecimiento, un deslizamiento, un zoom o un giro, sabes exactamente cómo se comportará en todo el proyecto. Está en la flexibilidad que proviene de las propiedades personalizadas sin el caos de infinitas variaciones. Y está en la accesibilidad integrada en los cimientos, en lugar de añadida como tal.una idea de último momento. He visto estas ideas funcionar en diferentes equipos y diferentes bases de código, y el patrón es siempre el mismo. Una vez que los tokens están en su lugar, los fotogramas clave dejan de ser una colección dispersa de trucos y pasan a formar parte del lenguaje de diseño. Hacen que el producto se sienta más intencionado, más consistente y más vivo. Si tomas algo de este artículo, que sea esto: las animaciones merecen el mismo cuidado y estructura que ya le damos a los colores, la tipografía y el espaciado. Una pequeña inversión en tokens de fotogramas clave se amortiza cada vez que se mueve su interfaz.
