Con CSS, puede crear animaciones que atraigan y deleiten a sus visitantes y se comporten exactamente como usted desea. Puede establecer cuántas veces se repite la animación CSS cuando comienza a reproducirse cuando se carga la página, y más.
Incluso puedes controlar el ritmo de la animación. Por ejemplo, suponga que desea que la animación comience lentamente, se acelere en la mitad del ciclo y luego disminuya la velocidad al final. Puede hacer esto usando la propiedad de tiempo de animación CSS.
Veamos cómo definir esta propiedad para controlar el ritmo de la animación a continuación.
Función de temporización de animación CSS
La función de temporización de la animación CSS establece el ritmo de la animación. Esto significa que le permite controlar cuándo la animación se acelera y se ralentiza durante el ciclo de animación.
Es importante comprender que esta característica no afecta la duración real de la animación. Esto lo establece la propiedad Duración de la animación en segundos o milisegundos. Pero la función de sincronización de tiempo de animación tiene un efecto sobre la percepción del usuario de la velocidad o la lentitud de la animación.
Esto se debe a que, según el valor utilizado para definir la función, la animación puede comenzar lentamente y luego acelerarse. Puede tener una velocidad constante o saltar al estado final inmediatamente. Estas son solo algunas de las posibilidades asociadas con la función de sincronización de animación.
Antes de echar un vistazo más de cerca a los posibles valores de la función de tiempo de animación, veamos cómo se escribe.
Sintaxis de la función de sincronización de tiempo de animación
La sintaxis para la función de sincronización de tiempo de animación CSS es:
Hay seis posibles valores de palabra clave para esta función: holgura, lineal, holgura, holgura, holgura, inicio de paso y final de paso. Explicaremos cada uno de ellos, así como los valores de función, pasos () y cube-bezier (), a continuación.
Función de sincronización de tiempo de animación de Webkit
También puede ver la función de sincronización de tiempo de animación escrita con el prefijo del proveedor. Estos prefijos generalmente se agregan cuando los desarrolladores experimentan con propiedades CSS que no son totalmente compatibles con algunos navegadores o versiones de este navegador.
Para Safari y Chrome, el prefijo del proveedor es -webkit-. Este prefijo es redundante si el desarrollador usa Safari 9.0 o Chrome 43.0, ya que estas versiones son totalmente compatibles con la función de sincronización de tiempo de animación. Sin embargo, se debe agregar el prefijo -webkit- al usar versiones más antiguas de estos navegadores.
Los prefijos de proveedor siempre se agregan antes del nombre de la propiedad en la declaración. Aquí se explica cómo escribir la función de sincronización de tiempo de animación con el prefijo -webkit-:
Valores de función de tiempo de animación CSS
Hay muchos valores posibles para la función de sincronización de tiempo de animación CSS. Los más comunes son facilidad, lineal, facilidad y ralentización, pero hay algunos otros que ofrecen un control más granular sobre la aceleración de la animación. Definamos cada valor a continuación.
Facilitar
La animación comienza lentamente, se acelera y luego se ralentiza. Si no se asigna ningún otro valor, la función se establecerá de forma predeterminada en mitigación.
ver la pluma función de tiempo de animación: facilidad de Christina Perricone (@hubspot) en CódigoPen.
Facilidad en
La animación comienza lentamente y luego se acelera gradualmente.
ver la pluma función de sincronización de animación: relajación de Christina Perricone (@hubspot) en CódigoPen.
Tómalo con calma
La animación comienza rápidamente y luego se ralentiza gradualmente.
ver la pluma función de tiempo de animación: relajación de Christina Perricone (@hubspot) en CódigoPen.
Facilidad de derivación
La animación tiene un comienzo lento y un final lento, acelerando en el medio.
ver la pluma función de tiempo de animación: aflojamiento de Christina Perricone (@hubspot) en CódigoPen.
Lineal
La animación tiene la misma velocidad de principio a fin.
ver la pluma función de tiempo de animación: lineal de Christina Perricone (@hubspot) en CódigoPen.
paso a paso
La animación salta al estado final inmediatamente.
Suponga que la animación comienza en 0 píxeles, luego se mueve 150 píxeles hacia la derecha y tiene una duración de 4 segundos. En lugar de moverse gradualmente hacia la derecha durante este tiempo, salta inmediatamente 150 píxeles hacia la derecha.
ver la pluma función de tiempo de animación: paso a paso de Christina Perricone (@hubspot) en CódigoPen.
escalón
La animación permanece en el estado de inicio hasta el final del ciclo de animación, cuando pasa inmediatamente al estado final.
Usando el mismo principio hipotético, la animación permanecerá en 0 px durante la mayor parte del ciclo de animación hasta que salte inmediatamente 150 px a la derecha al final.
ver la pluma función de tiempo de animación: paso a paso de Christina Perricone (@hubspot) en CódigoPen.
Tenga en cuenta que en el ejemplo anterior, eliminé la propiedad animation-iteration-count utilizada en los ejemplos anteriores y agregué la propiedad animation-fill-mode. Cuando se establece en «Adelante», esta propiedad garantiza que el elemento animado retendrá su apariencia de estado final incluso después de que finalice la animación (es decir, no restablecerá su posición).
Pasos (n, fecha de salto)
Puede usar pasos () para definir un número específico de pasos antes de que la animación alcance su estado final. Los paréntesis deben contener un número entero y un período de transición. La interpolación no progresará gradualmente a través de su ciclo de animación, sino que pasará de un estado a otro inmediatamente.
Hay cuatro posibles fechas de salto:
- Inicio rápido (o inicio): el primer salto está al principio de la animación
- Final de carrera (o final de salto): El último salto tiene lugar cuando finaliza la animación.
- Saltar-no: No hay salto de inicio o fin
- Saltar – ambos: hay una pausa al principio y al final
Digamos que n es 4 entonces tenemos 4 pasos. Inicio rápido significa que la animación se detiene temporalmente al 0 %, 25 %, 50 % y 75 %. Saltar al final significa que la animación se detiene al 25 %, 50 %, 75 % y 100 %. Jump-none significa que la animación hace 4 paradas entre 0% y 100% durante el ciclo de animación. Jump-Both significa que la animación realiza 4 paradas, incluidos 0 % y 100 % (es decir, 0 %, 33,3333 %, 66,66666 % y 100 %).
En el siguiente ejemplo, la animación se establece en seis pasos de 0% a 100% a lo largo del ciclo de animación.
ver la pluma función de tiempo de animación: pasos (n, salto) de Christina Perricone (@hubspot) en CódigoPen.
Cubic-bezier (x1, y1, x2, y2)
Para tener aún más control sobre el tiempo de la animación, puede especificar función de aceleración cúbica de Bézier. Los paréntesis deben contener dos pares, para un total de cuatro números. Representan las coordenadas x e y de dos puntos en la curva. Ambos valores de x deben estar en el rango [0, 1].
Técnicamente, cada valor de palabra clave sin pasos representa una curva de Bézier cúbica con cuatro valores de puntos constantes. Estos son:
- Facilidad = cubic-bezier (0.25, 0.1, 0.25, 1.0)
- Facilidad de entrada = cubic-bezier (0.42, 0, 1.0, 1.0)
- Ease-out = cubic-bezier (0, 0, 0.58, 1.0)
- Facilidad de salir = Cubic-Bezier (0.42, 0, 0.58, 1.0)
- Lineal = Cubic-Bezier (0.0, 0.0, 1.0, 1.0)
Si desea crear una curva de velocidad diferente para su animación, puede usar la función cubic-bezier () y definirla con valores indefinidos. Digamos que quiero crear una curva de velocidad más dramática que relajarse. Así que quiero que la animación se mueva muy rápido al comienzo del ciclo de animación y disminuya la velocidad al final. En ese caso, podría usar la función cubic-bezier (): cubic-bezier (.05, .8, .1, .95).
Aquí está la diferencia entre la curva de «dulzura» y la curva de valor de la función cubic-bezier (), según es una herramienta de gráficos.
Así es como se ve la animación después de configurar los valores de cubic-bezier () anteriores.
ver la pluma función de tiempo de animación: cubic-bezier (x1, y1, x2, y2) de Christina Perricone (@hubspot) en CódigoPen.
Gráfico de tiempo de animación
El siguiente gráfico muestra la animación con el tiempo establecido en cada uno de los diferentes valores: holgura, holgura, lineal, holgura, holgura, holgura, inicio de paso, final de paso, pasos () y cubic-bezier ().
ver la pluma Función de temporización de animación CSS: se compararon todos los valores de Christina Perricone (@hubspot) en CódigoPen.
Acelera tus animaciones CSS
Gracias a CSS, tienes control total sobre tus animaciones. Puede controlar la duración, la dirección, la hora de inicio y el ritmo de la animación, entre otras cosas. Controlar el ritmo de una animación es tan simple como agregar otra línea de CSS u otro valor mientras usa la propiedad Animación rápida.
