Using CSS Animation from static position to fixed position

I’m trying to build a photo galley so that when you press a photo, it overlays the website, and the background turns grey, and there is an animation of the photo turning big.

This is the animation:

@keyframes img {
  0% {
    position: static;
  }

  100% {
    position: fixed;
    top: 10%;
    left: 10%;
    margin: auto;
    width: 80%;
    height: 80%;
  }
}

The problem is that css don’t animate changing the position from static to fixed.
Is there a solution to this problem?

Tried calculating the location of the image. Did not work