Perdóname si esto ha sido abordado antes, no pude encontrar nada.

Estoy animando una barra de contenido que tiene niños totalmente posicionados fuera de ella (a través de márgenes negativos). La idea es que los niños se animen con la barra a medida que se expande.

Lo que sucede es que tan pronto como la animación comienza, los niños desaparecen y luego vuelven a aparecer cuando la animación se completa. Es como si la animación tuviera que completarse antes de que el navegador sepa dónde colocar a los niños.

He subido un ejemplo muy simple aquí, todos los scripts incluidos en la página:http://www.ismailshallis.com/jdemo/

¿Qué está pasando realmente? ¿Cuáles son mis opciones para solucionar esto?

Muchas gracias de antemano,

Belinda