how to popup zoom in animation?

February 9, 2022

I need to apply many types of animations on a popup using pure CSS and javascript. I understand that I should use transition and transform. But I face a problem with applying this. (it gives me no animation)

here is my attempt 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>

>Solution :

The display none and block property can not be animated unfortunately. Your code looks good otherwise, so in this case you need to use visibility: visible; and visibility: hidden;. Like this:

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>