Animaciones CSS dinámicas con la función de suavizado lineal()

La función de aceleración se introduce en CSS para ofrecer un control más preciso sobre la temporización de las animaciones. No se deje engañar por el nombre de esta función: no es lo mismo que la palabra clave que anima algo a una velocidad constante.linear()linear

La función amplía los límites de la animación CSS al permitirle crear movimientos compuestos y dinámicos, como efectos elásticos en CSS:linear()

Hagamos un repaso rápido de qué es la facilitación y veamos qué ofrecen otras funciones de facilitación para que podamos apreciar mejor lo que la función de facilitación aporta. linear()

¿Qué es la flexibilización?

Si quieres crear una animación realista, los objetos deben moverse de una forma específica. En la vida real, los objetos no se mueven ni se detienen instantáneamente, y rara vez se mueven a una velocidad constante. Por ejemplo, si dejas caer algo, primero se acelerará hacia abajo, luego se detendrá casi por completo al impactar contra el suelo, antes de rebotar y detenerse. En la animación, este tipo de movimiento dinámico se consigue mediante la aceleración.

Las funciones de suavizado especifican la velocidad de cambio de un parámetro a lo largo del tiempo. Se puede especificar el suavizado para una transición a través de la propiedad y una animación a través de ella.transition-timing-functionanimation-timing-function

Tipos de funciones de facilitación

El valor predeterminado de la propiedad en CSS es , que es una de las funciones de aceleración predefinidas. A continuación, se muestra una tabla que las enumera todas y describe su tasa de cambio a lo largo del tiempo:animation-timing-functionease

Estas facilitaciones se pueden visualizar como gráficos:

Aquí hay un CodePen que demuestra estas facilitaciones en uso, cada una con estilos idénticos aparte de sus:animation-timing-function

Un breve apunte sobre la terminología. Los valores de [ se refieren a] generalmente a funciones de facilitación (y quizás esto debería evitarse). Esto significa que las palabras clave mencionadas también podrían denominarse funciones de facilitación.animation-timing-function

Esto puede resultar confuso si se asocia el término “función” con la recepción de parámetros, como una función CSS. En cambio, es mejor considerar todos los valores de “implícitamente” como funciones matemáticas que devuelven valores numéricos.animation-timing-function

Hay tres tipos de funciones de facilitación personalizadas que pueden recibir parámetros:

1. La función CSSsteps()
2. La función CSScubic-bezier()
3. La función CSS que cubriremos con más profundidad en este artículo.linear()

La función de facilitaciónsteps()

Esta función permite dividir una animación en segmentos. Puede usar esta función de temporización cuando desee estados intermedios discretos en lugar de una transición continua entre estados. Puede usarse para animar un indicador de progreso, un efecto de escritura o un reloj analógico.steps()

Un reloj analógico es una demostración ideal de [texto incoherente]. Las manecillas del reloj giran en incrementos repentinos y específicos. El segundo gira 60 veces por minuto, por lo que la animación consta de 60 pasos y su duración es de 60 segundos. Queremos que se ejecute indefinidamente, así que podemos configurar [texto incoherente] como infinito:steps()animation-iteration-count

. segundo { animación - nombre : tick animación - tiempo - función : pasos ( 60 , fin ); animación-iteración-conteo: infinito; animación-duración: 60s; } @keyframes tick { a { transformar : rotar ( 360 grados ); } }  

Aquí hay un CodePen de un reloj con un segundo en movimiento para demostrar esta animación:

Probablemente no lo utilizarás muy a menudo, y yo diría que su uso es bastante específico.steps()

La función de facilitacióncubic-bezier()

Esta función permite crear una transición suave personalizada que proporciona una transición continua entre estados. Es muy versátil.cubic-bezier()

En CSS, las curvas de Bézier se definen mediante cuatro puntos que las descritas: un punto inicial, un punto final y dos puntos de control. No es necesario que usted mismo determine estos valores. Puede usar las herramientas de desarrollo del navegador o https://cubic-bezier.com/ para crear la curva deseada moviendo los dos puntos de control, como se muestra a continuación:

Por ejemplo, quería recrear la animación del título de la serie de televisión Schitt's Creek. El texto del título gira hacia el espectador, se sale de su objetivo y se corrige ligeramente moviéndose hacia atrás. Necesitaba crear una aceleración personalizada para esto.

Creé la suavización en https://cubic-bezier.com/; produjo el fragmento cubic-bezier(.14, 1.23, .33, 1.16)de la curva que hice:

A continuación se muestra una animación simplificada de la simplificación del uso personalizado:

Aquí está la animación CSS final para el título de Schitt's Creek (haga clic en elRepeticiónbotón si te lo pierdes):

Si visita easings.net, podrá ver la variedad de funciones de facilitación que se pueden realizar con cubic-bezier():

La limitación de la cubic-bezier()función es que no se puede crear una curva donde el progreso aumente y disminuya varias veces. Si quisiéramos que el texto de mi ejemplo oscilara varias veces, esto no sería posible con una cubic-bezier()aceleración.

La linear()función de facilitación

La linear()función puede tomar cualquier número de puntos como entrada para crear una aceleración compleja. Definida en la especificación CSS Easing Nivel 2, permite crear movimientos compuestos, como efectos de rebote en CSS.

Esta animación de un balón de fútbol que se deja caer y rebota varias veces utiliza una easeOutBouncesuavización creada con linear():

Hay muchos más ejemplos de funciones de facilitación en easings.net que se pueden aproximar con linear(). Digo “aproximar” porque los puntos proporcionados a la linear()función de facilitación se unen como líneas rectas, por lo que no es una curva suave como las gráficas anteriores. Probablemente por eso se le denominó “lineal”. Como se mencionó anteriormente, no se debe confundir con la linearpalabra clave, que se visualiza como una sola línea recta.

Por ejemplo, si queremos crear la easeOutBouncefunción de facilitación usando linear(), así es como se ve como gráfico:

Este es el CSS para la animación de fútbol:

:root { --easeOutBounceEasing: linear( /* Inicio al 1er rebote */ 0, 0.063, 0.25, 0.563, 1 36.4%, /* 1er al 2do rebote */ 0.812, 0.75, 0.813, 1 72.7%, /* 2do al 3er rebote */ 0.953, 0.938, 0.953, 1 90.9%, /* 3er rebote al final */ 0.984, 1 100% 100% );}.ball { /* otros accesorios */ animation: drop 2s infinite; animation-timing-function: var(--easeOutBounceEasing);}@keyframes drop { to { translate: 0; }}

Cuando utilice las funciones de facilitación de manera efectiva, encontrará que @keyframesson breves y simples como las mencionadas anteriormente.

Probablemente te estés preguntando qué son todos los números proporcionados linear(). Analizamos la sintaxis.

Entendiendo la linear()sintaxis

Generalmente, se proporcionarán valores entre cero y uno como una lista de argumentos separados por comas a la función. Cada argumento es una parada. Por defecto, las paradas son equidistantes. Por lo tanto, si hay tres paradas, se encontrarán al 0 %, 50 % y 100 % de la duración (el eje X del gráfico).

Por ejemplo, la linear(0, 0.8, 1)función tiene paradas de 0, 0.8y 1. La duración es la misma (50%) para ir de 0a 0.8(primer segmento de línea) que para ir de 0.8a 1(segundo segmento de línea):

Puedes añadir un linear-stop-lengthporcentaje a una parada para controlar con mayor precisión la duración. Defina el inicio o la duración de cada segmento, lo que permite un avance más controlado de la animación.

Por ejemplo, la linear(0, 0.8 70%, 1)función tiene una linear-stop-lengthpara el primer segmento. Ahora, el 70 % del tiempo se utiliza para ir de 0a 0.8, y el 30 % para ir de 0.8a 1. Es prácticamente una línea recta:

No te preocupes si la sintaxis parece complicada, ¡es poco probable que la escribas a mano! Probablemente copie un fragmento de código o utilice una herramienta para generar los valores. Veamos dónde puedes obtenerlos.

Facilitaciones predefinidas linear()y cómo generar las tuyas propias

Mi recurso predilecto para animaciones complejas es la biblioteca de JavaScript GSAP (Greensock), que cuenta con una excelente colección de facilitaciones predefinidas. Su visualizador de facilitación es muy útil para encontrar la adecuada.

Jhey Thompkins convirtió algunas de las funciones de facilitación de GSAP en variables CSS. Las variables CSS a continuación corresponden a los nombres en el visualizador de facilitación de GSAP:

/* Facilitaciones de GSAP como variables CSS */:root { --elastic-in: linear( 0, 0.0019 13.34%, -0.0056 27.76%, -0.0012 31.86%, 0.0147 39.29%, 0.0161 42.46%, 0.0039 46.74%, -0,0416 54,3%, -0,046 57,29%, -0,0357, -0,0122 61,67%, 0,1176 69,29%, 0,1302 70,79%, 0,1306 72,16%, 0,1088 74,09%, 0,059 75,99%, -0,0317 78,19%, -0,3151 83,8%, -0,3643 85,52%, -0,3726, -0,3705 87,06%, -0,3463, -0,2959 89,3%, -0,1144 91,51%, 0,7822 97,9%, 1); --elástico-fuera: lineal( 0, 0,2178 2,1%, 1,1144 8,49%, 1,2959 10,7%, 1,3463 11,81%, 1,3705 12,94%, 1,3726, 1,3643 14,48%, 1,3151 16,2%, 1,0317 21,81%, 0,941 24,01%, 0,8912 25,91%, 0,8694 27,84%, 0,8698 29,21%, 0,8824 30,71%, 1,0122 38,33%, 1,0357, 1,046 42,71%, 1,0416 45,7%, 0,9961 53,26%, 0,9839 57,54%, 0,9853 60,71%, 1,0012 68,14%, 1,0056 72,24%, 0,9981 86,66%, 1); --elástico-dentro-fuera: lineal( 0, -0.0028 13.88%, 0.0081 21.23%, 0.002 23.37%, -0.0208 27.14%, -0.023 28.64%, -0.0178, -0.0061 30.83%, 0,0588 34,64%, 0,0651 35,39%, 0,0653 36,07%, 0,0514, 0,0184 38,3%, -0,1687 42,21%, -0,1857 43,04%, -0,181 43,8%, -0,1297 44,93%, -0,0201 46,08%, 1,0518 54,2%, 1,1471, 1,1853 56,48%, 1,1821 57,25%, 1,1573 58,11%, 0,9709 62%, 0,9458, 0,9347 63,92%, 0,9349 64,61%, 0,9412 65,36%, 1,0061 69,17%, 1,0178, 1,023 71,36%, 1,0208 72,86%, 0,998 76,63%, 0,9919 78,77%, 1,0028 86,12%, 1); --bounce-in: lineal( 0, 0.0117, 0.0156, 0.0117, 0, 0.0273, 0.0468, 0.0586, 0.0625, 0.0586, 0.0468, 0.0273, 0 27.27%, 0.1093, 0.1875 36.36%, 0.2148, 0.2343, 0.2461, 0.25, 0.2461, 0.2344, 0.2148 52.28%, 0.1875 54.55%, 0.1095, 0, 0.2341, 0.4375, 0.6092, 0,75, 0,8593, 0,9375 90,91%, 0,9648, 0,9843, 0,9961, 1); --rebote: lineal( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0,7852, 0,7657, 0,7539, 0,75, 0,7539, 0,7657, 0,7852, 0,8125 63,64%, 0,8905, 1 72,73%, 0,9727, 0,9532, 0,9414, 0,9375, 0,9414, 0,9531, 0,9726, 1, 0,9883, 0,9844, 0,9883, 1); --rebote-de-entrada-de-salida: lineal( 0, 0.0078, 0, 0.0235, 0.0313, 0.0235, 0.0001 13.63%, 0.0549 15.92%, 0.0938, 0.1172, 0.125, 0.1172, 0,0939 27,26%, 0,0554 29,51%, 0,0003 31,82%, 0,2192, 0,3751 40,91%, 0,4332, 0,4734 45,8%, 0,4947 48,12%, 0,5027 51,35%, 0,5153 53,19%, 0,5437, 0,5868 57,58%, 0,6579, 0,7504 62,87%, 0,9999 68,19%, 0,9453, 0,9061, 0,8828, 0,875, 0,8828, 0,9063, 0,9451 84,08%, 0,9999 86,37%, 0,9765, 0,9688, 0,9765, 1, 0,9922, 1);}

Aquí está la herramienta de Jhey para generar una facilitación CSS a partir de una cadena de facilitación GSAP:

La biblioteca CSS Open Props también incluye una colección de linear()facilitaciones en su hoja de estilo easings.css. A continuación, un extracto:

:donde(html) { --ease-spring-1: lineal( 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 ); --ease-spring-2: lineal( 0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1 ); --ease-spring-3: lineal( 0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76,9%, 1 ); --ease-spring-4: lineal( 0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% ​​20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973, 0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%, 0.998 78,9%, 1 ); --ease-spring-5: lineal( 0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%, 0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56,4%, 1 65,2%, 0.996 70,2%, 1.001 87,2%, 1); --ease-bounce-1: lineal( 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%, 0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879, 0.885, 0.895, 0.908 89.7%, 0.946, 1 ); --ease-bounce-2: lineal( 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765, 1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788, 0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0,954, 0,973, 1 ); --ease-bounce-3: lineal( 0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764, 1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672, 0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879, 0,878, 0,879, 0,885 79,5%, 0,908, 0,946, 1 87,4%, 0,981, 0,968, 0,96, 0,957, 0,96, 0,968, 0,981, 1); --ease-bounce-4: lineal( 0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81, 0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%, 0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%, 0.94 80,6%, 0,925, 0,92, 0,925, 0,94 87,5%, 1 90,9%, 0,974, 0,965, 0,974, 1); --ease-bounce-5: lineal( 0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627, 0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892, 0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%, 0,908 72,4%, 0,885, 0,878, 0,885, 0,908 79,4%, 1 83%, 0,954 85,5%, 0,943, 0,939, 0,943, 0,954 90,5%, 1 93%, 0,977, 0,97, 0,977, 1);}

Estos deben cubrir los casos más comunes. Si desea crear visualmente una linear()suavización, puede crearla y editarla como un gráfico en las herramientas de desarrollo del navegador. Lo abordaré en la siguiente sección.

Para casos más especializados, puede que necesite convertir usted mismo una función de aceleración de JavaScript. Jake Archibald desarrolló una linear()herramienta generadora que permite tomar una función de JavaScript o una ruta SVG como entrada para generar un fragmento de CSS:

Edición de la linear()función de suavizado en las herramientas de desarrollo del navegador

Firefox ha actualizado sus herramientas de desarrollo para permitir la edición de una linear()función suavizada como un gráfico. En elNormaspestaña, haga clic en el ícono gris que aparece junto a la función de facilitación en las declaraciones de transition-timing-function, animation-timing-function, transition, o animationpara abrir un panel del editor visual.

Puede arrastrar puntos existentes para cambiar su posición y agregar nuevos haciendo doble clic en la línea. Consulta la documentación de Firefox para obtener sobre cómo editar la función de suavizado en las herramientas de desarrollo:

Las herramientas de desarrollo de Chrome ofrecen una experiencia de edición similar a la de Firefox. En su documentación, lo llaman “Editor de Agilización”.Estilospestaña, haga clic en el ícono morado que aparece junto a la función de suavizado en las declaraciones de transition-timing-function, animation-timing-function, transition, o animationpara abrir un panel del editor visual:

La vida antes linear(): Imitando la facilitación compleja con@keyframes

Finalmente, demostraremos cómo era crear animaciones CSS complejas antes del lanzamiento de [Nombre del proyecto] linear(). Compararemos el código necesario para crear una animación ligeramente compleja en CSS sin [Nombre del proyecto] y con [Nombre del proyecto] linear()para ver cómo se comparan.

Una forma alternativa de aproximar una suavización personalizada más compleja es mediante un truco numérico usando @keyframes. Necesitamos determinar el valor exacto de un atributo de un elemento (posición, tamaño, rotación, etc.) en varios puntos del tiempo, lo que requiere crear una larga lista de fotogramas clave.

Anteriormente, algunos desarrolladores usaban preprocesadores CSS para generar el código, pero este enfoque tenía limitaciones. El equipo de easings.net proporciona fragmentos precalculados para las distintas easings y así animar algunos atributos: tamaño, posición y transparencia. Si desea animar otro atributo, no podrá hacerlo.

Por ejemplo, supongamos que queremos reducir el tamaño de un punto rojo de forma que rebote. Queremos el equivalente a la easeOutBouncesuavización:

Podemos obtener el @keyframesfragmento de tamaño de easings.net. Tiene 10 puntos intermedios definidos. Aquí está el fragmento combinado con el código de animación:

.punto { transformar: escala(0); animación: escala 2s infinita;}@keyframes escala { 0% { transformar: escala(1); } 12% { transformar: escala(0.89); } 24% { transformar: escala(0.56); } 36% { transformar: escala(0.02); } 54% { transformar: escala(0.25); } 74% { transformar: escala(0.02); } 82% { transformar: escala(0.06); } 92% { transformar: escala(0.01); } 96% { transformar: escala(0.02); } 100% { transformar: escala(0); }}

El código equivalente utilizado linear()es el siguiente:

:root { --easeOutBounceEasing: lineal( 0, 0,063, 0,25, 0,563, 1 36,4%, 0,812, 0,75, 0,813, 1 72,7%, 0,953, 0,938, 0,953, 1 90,9%, 0,984, 1 100% 100% );}.dot { escala: 0; animación: escala 2s; función de tiempo de animación: var(----easeOutBounceEasing);}@keyframes escala { a { escala: 1; }}

El código linear()es más conciso y flexible. Antes, era probable que se usara JavaScript al llegar a este punto. Aquí está el CodePen de esta linear()versión.

Un importante recordatorio de accesibilidad.

Algunos usuarios prefieren navegar por la web con movimiento reducido porque experimentan sobreestimulación o náuseas con el contenido animado. Deberíamos ofrecerles una alternativa adecuada siempre que sea posible. Esto se puede hacer fácilmente con la prefers-reduced-motionconsulta de medios, ampliamente utilizada:

.bouncy-ball { /* Animación normal */ animación: rebote 1 s;}@media (prefiere movimiento reducido) { .bouncy-ball { /* Animación accesible -ralentizada */ animación: rebote 4 s; }}

Conclusión

Anteriormente, CSS carecía de un control preciso sobre la sincronización de animaciones y transiciones. La única manera de lograr el comportamiento deseado para animaciones más complejas era recurrir a soluciones JavaScript.

Gracias a la introducción de esta función, puedes crear fácilmente movimientos dinámicos, como efectos de rebote y elásticos, en CSS. Es ampliamente compatible con la mayoría de los navegadores y ofrece casi un 100% de interoperabilidad según el estado de la plataforma web, así que puedes usarla con confianza de inmediato.linear()

¿Su interfaz está capacitando la CPU de sus usuarios?

A medida que las interfaces web se vuelven cada vez más complejas, las funciones que consumen muchos recursos exigen cada vez más del navegador. Si te interesa supervisar y rastrear el uso de CPU, memoria y otros recursos del lado del cliente para todos tus usuarios en producción,Prueba LogRocket.

Modernice su forma de depurar aplicaciones web y móviles: comience a monitorearlas de forma gratuita.

Si quieres conocer otros artículos parecidos a Animaciones CSS dinámicas con la función de suavizado lineal() puedes visitar la categoría Guias.