I'm having trouble manipulating the size and position of an absolutely positioned div. Even after scaling, the div doesn't end up where I intended it to be in my keyframe animation.
I suspect that this issue is caused by the fixed coordinates of the div, which do not adjust accordingly after scaling.
While one solution could be manually tweaking the final coordinates in the keyframe, I am curious if there is a more efficient way to address this problem?
Below is a snippet of my code (with vendor prefixes removed), and you can view the interactive example on this fiddle link.
HTML
<div class="popin willGoToUpperLeft"></div>
CSS
.popin{
width:400px;
height:200px;
position:absolute;
top:300px;
left:200px;
background:url('//placekitten.com/400/200');
}
.willGoToUpperLeft{
animation: scaleOut 1s ease-in-out 0s 1 normal forwards,
goToLeftCorner 1s ease-in-out 1s 1 normal forwards;
}
@keyframes scaleOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0.1);
}
}
@keyframes goToLeftCorner {
100% {
top: 0px;
left: 0px;
}
}