Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
11 Hrs
31 Min
34 Seg

Buenas prácticas para optimizar animaciones web

11/12

Reading

Considering what we saw in the CSS Triggers class, here are 5 best practices to optimize your web animations:

...

Sign up or log in to read the rest of the content.

Contributions 7

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

También considerar reducir o en algunos casos eliminar las animaciones en dispositivos móviles, ya que el rendimiento no es el mismo.

Con los consejos de este modulo se logra mejorar el rendimiento de los frames, muy cercano a lo que se considera optimo 60fps (frames por segundo).
.

.
Pasamos de 30 y algo fps a 59 fps.

Resumen de la lectura

Usa opacity y transform para animar. Propiedades como width, height, background y cualquier otras que utilicen una gran cantidad de pixeles son greedy.

Seguí los consejos y me va super bien 😄

Muy interesante

Los "keyframes" son fundamentales en la creación de animaciones CSS. Permiten definir puntos clave en la animación, especificando cómo deben cambiar los estilos CSS a lo largo del tiempo. Esto se hace a través de la regla `@keyframes`, donde se pueden definir diferentes etapas de la animación. Ejemplo básico: ```css @keyframes example { 0% { background-color: red; } 100% { background-color: yellow; } } ``` Luego, se utiliza la propiedad `animation` para aplicar los keyframes a un elemento. Esto te permite crear animaciones fluidas y controladas en tus proyectos web.

buenas recomendaciones