También considerar reducir o en algunos casos eliminar las animaciones en dispositivos móviles, ya que el rendimiento no es el mismo.
Requisitos para tomar el curso
Sabes más de animaciones de lo que crees
Animationland game
Creando contadores con CSS en Animationland
Maquetando a nuestros conejitos en Animationland: contexto de apilamiento
Dibujando a nuestros conejitos con CSS en Animationland
Animation y keyframes en CSS
Animation name y keyframe
Animation duration
Animation timing function, iteration count y delay
Animation direction, fill mode y play state
Rendimiento de animaciones con CSS
CSS Triggers: layout, paint y composite
Debugging de animaciones con DevTools
Buenas prácticas para optimizar animaciones web
Libros recomendados y próximos pasos
Continúa en el Curso Práctico de Animaciones con CSS
Contributions 7
Questions 2
Sort by:
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
Want to see more contributions, questions and answers from the community?