Necesito aplicar muchos tipos de animaciones en una ventana emergente usando CSS puro y javascript. Entiendo que debo usar transition y la transform . Pero me enfrento a un problema al aplicar esto. (no me da animacion)
aquí está mi intento zoom in .
function zoomIn(){ document.getElementById('layout').classList.add('show'); } .layout{ position: fixed; inset:0; background: rgba(0,0,0,.7); display: none; transition: transform 250ms, opacity 400ms; } .layout img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .show { display: block; transform: scale(1.2); opacity: 1; } <button onclick="zoomIn()" style="padding:20px">zoom in</button> <div id="layout" class="layout"> <img src="https://media.istockphoto.com/illustrations/king-lion-aslan-illustration-id458017717?k=20&m=458017717&s=612x612&w=0&h=4qOseLgTPV5ZOEoZD2scNzf-LQ7AWoRXtbidR61OhG8=" width="400" /> </div>Desafortunadamente, la propiedad display none y block no se puede animar. De lo contrario, su código se ve bien, por lo que en este caso necesita usar la visibility: visible; and visibility: hidden; . Como esto:
function zoomIn(){ document.getElementById('layout').classList.add('show'); } .layout{ position: fixed; inset:0; visibility:hidden; background: rgba(0,0,0,.7); transition: transform 250ms, opacity 400ms; } .layout img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .show { transform: scale(1.2); visibility: visible; opacity: 1; } <button onclick="zoomIn()" style="padding:20px">zoom in</button> <div id="layout" class="layout"> <img src="https://media.istockphoto.com/illustrations/king-lion-aslan-illustration-id458017717?k=20&m=458017717&s=612x612&w=0&h=4qOseLgTPV5ZOEoZD2scNzf-LQ7AWoRXtbidR61OhG8=" width="400" /> </div>