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>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>