La animación CSS no funcionará con 'overflow: hidden;'

Apreciaría si alguien pudiera indicarme la dirección correcta si me dice qué estoy haciendo mal. Por favor mira estoejemplo. Como puede ver, estoy intentando mover "div 2" a "div 1" cuando se hace clic en el botón. Realmente funciona bien, el segundo div aparece en el primer div como se esperaba, pero por alguna razón, el clic no activa la animación CSS, lo que debería dar al segundo div un efecto de diapositiva.

Lo he reducido a que tiene algo que ver con el atributo 'desbordamiento: oculto', porque la animación realmente funcionará cuando se elimine de 'div 1', pero como es muy probable que descubras, quiero que el segundo div. Solo será visible cuando esté posicionado en la primera div.

¿Por qué no funciona la animación?

Estoy usando Chrome, OSX.

¡Gracias por adelantado!

/ Christofer

Respuestas a la pregunta(2)

Su respuesta a la pregunta