Transitions and Animations in CSS

Libro de Estelle Weyl, ingeniera front-end especializada en estándares web y accesibilidad, dedicado a añadir movimiento a las páginas solo con CSS. Es un extracto ampliado de la cuarta edición de «CSS: The Definitive Guide» y trata los módulos CSS Transitions y CSS Animations tal como los soportaban los navegadores en 2016, incluidos los prefijos de proveedor. Está pensado para desarrolladores de nivel principiante a intermedio que ya conocen CSS y quieren animar interfaces sin depender de JavaScript.

Empieza con los 12 principios básicos de la animación de Disney y con lo que hay que tener en cuenta antes de animar una interfaz. El capítulo de transiciones explica las cuatro propiedades (transition-property, transition-duration, transition-timing-function y transition-delay) y su forma abreviada, los valores all y none, las demoras negativas, la vuelta al estado inicial, cómo se interpolan los valores, qué propiedades se pueden animar, el evento transitionend y el uso de las transiciones como mejora progresiva. El capítulo de animaciones cubre @keyframes y sus selectores, el cambio dinámico de animaciones y las nueve propiedades animation-* (nombre, duración, número de repeticiones, dirección, demora, funciones de temporización y steps(), estado de reproducción y modo de relleno). También trata la interacción con la especificidad y !important, el orden de las animaciones, el caso de display: none, el hilo de la interfaz, los riesgos para personas con epilepsia fotosensible, los eventos animationstart, animationend y animationiteration, y cómo se comportan al imprimir.

No tiene proyectos completos, pero abunda en ejemplos concretos, como una pelota que rebota, un menú desplegable que se expande o efectos al pasar el ratón. Su gran aporte, como destaca la reseña de Ben Nadel, es dejar claro que transiciones y animaciones son mecanismos distintos y cuándo conviene cada uno. Hay que tener en cuenta que no trata la Web Animations API, las animaciones vinculadas al scroll ni las librerías de JavaScript, y que parte de lo que dice sobre prefijos ya está desfasado.