ZoomIn animation from relative to fixed position - html

Question

I have sample code on codepen here
.liel{
position: relative;
}
.parent{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, .8);
z-index:100;
}
.green{
width:100px;
height:100px;
background-color:green;
}
#keyframes zoomIn {
0%{
top:0;
left:0;
width:100px;
height:100px;
opacity: 0;
}
100%{
opacity: 1;
}
}
.zoom{
width:200px;
height:200px;
background-color:red;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
animation: zoomIn 5s;
}
<ul>
<li class="liel">
<div class="green"></div>
<div class="parent">
<div class="zoom"></div>
</div>
</li>
</ul>
There are 2 rectangles - one red and one green.
Green can be anywhere on the screen.
What I'm trying to create is zoom-in animation from position of green rectangle to the final position of red rectangle. I'm trying somehow to get starting position relative to green rectangle, but cannot do it since .parent element is also fixed in position.
Currently red element has zoom-in effect but initial position is left:0 top:0 which is position of .parent and not .green.
Is there any workaround for this?

Answer 1

May be this can help you. (Read this other stackoverflow answer)
$(document).ready(function() {
setTimeout( function(){
$('.green').addClass('fixed');
},1000);
$('.green').css('position','fixed');
});
.liel{
position: relative;
}
.parent{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, .2);
z-index:100;
pointer-events: none;
}
.green {
width:100px;
height:100px;
background-color:green;
transition: all 5s ease-in-out;
}
.zoom{
width:200px;
height:200px;
background-color:red;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
animation: zoomIn 5s;
}
.fixed {
animation: zoomIn 5s;
transform: translate(-50%, -50%);
width:200px;
height:200px;
top:50%;
left:50%;
}
#keyframes zoomIn {
0%{
top:0;
left:0;
width:100px;
height:100px;
opacity: 0;
}
100%{
opacity: .5;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="liel">
<div class="green"></div>
<div class="parent">
<div class="zoom"></div>
</div>
</li>
</ul>