Hay una extension para vscode de csstriggers que sirve mucho para estos casos.
Mover algo cambiando left/top/etc es una mala practica, por eso es muy útil utilizar el translate. Es solo un ejemplo de que propiedades animar/transicionar
Importancia de las animaciones web
5 razones para usar animaciones en la web
Conceptos iniciales
Propiedades para crear animaciones con CSS y propiedades animables
Pseudo-clases y pseudo-elementos en las animaciones
Timing functions, planos y ejes
Transformaciones en 2D y 3D
Transform translate
Transform rotate, scale, skew y matrix
Transform origin
Transform style y perspective
Backface visibility
Parallax con transformaciones
Efecto parallax: estructura HTML
Efecto parallax: estilos CSS
Transiciones
Transition property y duration
Transition timing function y delay
Tips de UX
Movimiento impulsado por la acción
Tiempos de espera
Problemas de parpadeo
Rendimiento y accesibilidad
Propiedades recomendadas y no recomendadas para animar
Aceleración de hardware y la propiedad will-change
Preferencias de movimiento reducido
Libros recomendados y próximos pasos
Continúa en el Curso de Animaciones con CSS
Propiedades recomendadas y no recomendadas para animar
Al hacer animaciones debemos fijarnos que no sean demasiado costosas computacionalmente para que no parezcan inestables y poco fluidas.
...
Regístrate o inicia sesión para leer el resto del contenido.
Aportes 8
Preguntas 6
Ordenar por:
Vaya, yo solía animar la propiedad position para menús laterales. Lo mejor será usar translate().
Otra buena propiedad que se puede utilizar y con la cual se pueden obtener muy buenos efectos es clip-path
Les comparto su documentación
¡Wow! sorprendente el proyecto quantum css de Mozilla, ahora tengo ganas de aprender rust
Resumen:
Para hacer animaciones eficientes, debemos evitar propiedades que sean costosas computacionalmente y utilizar aquellas que son más económicas. El proceso de renderizado en los navegadores consta de varios pasos, pero los más importantes son Layout, Paint y Composite. Algunas propiedades requieren pasar por más pasos, lo que las hace más costosas de animar, como height, width y background-color. En cambio, propiedades como transform y opacity son más baratas de animar ya que solo requieren del paso de Composite.
esta genial esta pagina y los comentarios gracias!
Esta interesante la lectura recomendada, tocaría buscar si al final se aplico el quantum css a Fire Fox.
Me encanto esta info… muy buenos tips para mejorar el performance. Gracias!!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.