Animaciones CSS: los fundamentos

Una animación CSS describe cómo cambian determinadas propiedades durante un periodo. Antes de añadir movimiento conviene identificar el cambio que debe comprender el usuario.

Estados y fotogramas clave

Una transición conecta dos estados, como el aspecto normal de un botón y su estado activo. Los fotogramas clave permiten describir varias etapas de una secuencia. La elección depende del comportamiento que necesitas explicar.

Empieza con una propiedad y un elemento. Una prueba pequeña facilita distinguir el efecto de la duración, la distancia y la curva de aceleración.

Movimiento que acompaña al contenido

Abrir un panel puede ayudar a reconocer su relación con el control que lo activa. Un efecto repetido sin una función puede competir con la lectura.

Comprueba también la versión sin movimiento. La información importante debe seguir siendo accesible cuando una persona prefiere reducir las animaciones.

Revisar el resultado

Prueba el componente con distintos métodos de entrada. Los estados de teclado deben recibir la misma atención que los de ratón.

Guarda una versión sencilla que funcione y compara cada cambio con ella. La intención del diseño debe seguir siendo reconocible.

Seguir aprendiendo

Relaciona esta lectura con los demás recursos de Kervio y prueba las ideas en un proyecto pequeño. Las imágenes, cuando aparecen, son ilustrativas.