Ubuntu

Animaciones CSS

Animaciones CSS

En nuestro equipo, llevamos a cabo “clases magistrales” cada pocas semanas, para compartir conocimientos con todo el equipo.

Similar a la publicación de Robin sobre conceptos básicos de expresiones regulares, aquí está el contenido de la clase magistral sobre “animaciones CSS” que acabo de presentar al equipo.

Los fundamentos

Un ejemplo simple de “transformación”:

.btn:hover {
transform: translateY(-40px);
}

Esto simplemente salta de una posición a otra sin animación. Pero muestra cómo ha traducido estados usando CSS.

Agregar transición para agregar animación hará que el cambio de estado se anime.

transition: transform 250ms;

Las transiciones requieren dos valores, nombre de propiedad y duración. El nombre de la propiedad es la propiedad CSS que le gustaría animar.

Puede agregar varios con una sintaxis separada por comas

transition: transform 250ms, opacity 400ms;

Esto le permite ser específico con las propiedades que desea que el navegador anime y proporcionar atributos únicos para cada una. En el ejemplo anterior, la duración es diferente entre la transformación y la opacidad.

Hay una propiedad comodín especial llamada “todos”. Esta propiedad es un comodín para todas las propiedades CSS. Puede ser tentador usar “todos”, pero no se recomienda, ya que a medida que su producto evoluciona, es probable que usted (o alguien de su equipo) termine actualizando este código en algún momento en el futuro. Dando como resultado una animación inesperada o un rendimiento deficiente.

Funciones de cronometraje

los transition-timing-function define la aceleración en la línea de tiempo de la animación.

  • Facilitarse: entra rápido y se relaja al final. Se usa comúnmente cuando algo ingresa desde fuera de la pantalla.
  • facilidad en: entra y luego acelera. Útil cuando se mueve algo más allá de los límites de la ventana gráfica.
  • facilidad de entrada y salida: es una combinación de las dos funciones de temporización anteriores. Debe utilizarse para elementos de bucle.
  • facilidad: tiene una pequeña cantidad de aceleración y mucha deceleración. El valor predeterminado, que es bueno como bueno en muchos casos. Principalmente cosas que permanecen dentro de la ventana gráfica.
  • La función de temporización personalizada se puede proporcionar con una función de bezier cúbico, que toma cuatro números, que representan dos puntos de control. Siéntete libre de jugar con cubic-bezier.com.

Rendimiento de animación

Para mantener las animaciones a 60 fps, el navegador tiene 16,6 ms para calcular y volver a pintar. Si el navegador no puede hacer eso en esa cantidad de tiempo, su animación parecerá inestable.

Algunas propiedades de CSS son muy caras, por ejemplo, la altura, ya que tiene un efecto en cadena al mover otros elementos.

Otros son algo caros, por ejemplo, background-color. Esto no afecta el diseño, pero es necesario volver a pintar cada cuadro, lo que no es barato.

Las dos propiedades que son muy baratas de animar son transform y opacity. Si una animación modifica actualmente una propiedad como el ancho o la izquierda, se puede mejorar moviéndola a una transformación.

Aceleracion de hardware

Cuando animas el transform o opacity propiedades de un elemento. El navegador intentará optimizar la animación transfiriendo todo a la GPU como una textura.

Esto puede resultar en una representación ligeramente diferente, especialmente notable en el texto. Cuando la animación llega al final, el elemento se devuelve a la CPU para renderizarlo y puede causar un movimiento no deseado.

will-change al rescate. Esta propiedad nos permite indicarle al navegador que vamos a animar este elemento y que debería optimizarlo para este caso.

will-change: transform;

La GPU manejará el renderizado todo el tiempo, por lo que ya no cambiará de CPU a GPU y viceversa.

Retrasos

Los retrasos de la animación definen el tiempo que espera la animación antes de comenzar. Esto suele ser útil cuando se animan varios elementos y desea espaciar las animaciones en una línea de tiempo.

animation-delay: 2s;

Respetando las preferencias de movimiento

Las preferencias de movimiento son una configuración a nivel de sistema operativo. Los usuarios pueden alternar para expresar su preferencia por menos movimiento. Apliquemos esas lecciones aquí, desactivando animaciones para aquellos que solicitan que se reduzcan:

@media (prefers-reduced-motion: reduce) {
.btn {
transition: none;
}
}

Fotogramas clave

Puede crear sus propias animaciones con mucho más control utilizando los fotogramas clave de animación.

@keyframes infinite-spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Para aplicar esta animación a un elemento:

.animate {
animation: infinite-spinner 2s infinite forwards;
}

Una propiedad de animación requiere un nombre de animación y una duración. Si los valores opcionales interesantes son:

  • animation-fill-mode que define qué valores aplica una animación fuera del tiempo en que se está ejecutando. Por ejemplo, los reenvíos dejan el elemento al final de la animación en lugar de devolverlo al principio, que es el comportamiento predeterminado.
  • steps: La función steps () controla exactamente cuántos fotogramas clave se mostrarán en el intervalo de tiempo de la animación.

Recursos

Leave a Comment

You may also like

Más