Cómo agregar animación de transición en HTML estático si voy a otra página

No puedes

Como probablemente sepa, las transiciones son una propiedad CSS. CSS se carga en una página y se aplica al HTML. Cuando se mueve de una página a otra, todos los recursos de la primera página se descargan: el HTML, CSS y JS que formaban la página anterior no se están ejecutando.

Esto significa que no tiene control sobre el navegador durante el tiempo entre la descarga de la página y la carga de la nueva página. El usuario experimentará una pantalla en blanco hasta que el nuevo contenido comience a cargarse.

Una forma de lograr un efecto similar al que desea es escribir JavaScript para cargar contenido dinámicamente, luego aplicar las clases CSS necesarias al contenido de modo que parezca que el contenido se desvanece dentro y fuera. Si desea llevar esta idea más allá, puede considerar desarrollar una aplicación de una sola página, utilizando un marco como React o Angular.

Aquí tienes fam:

Cómo crear una pantalla de precarga personalizada | Tutorial CSS3

¡Que te diviertas!