How to (animated) scale out from center instead of from the left side

Question

I have the following code on jsfiddle but I want the image to scale out from the center as opposed to from the left hand side

What do I need to add to the code to make this happen?

Thanks in advance

https://jsfiddle.net/kayanna/oc9jyruq/6/

img {
    width: 500px;
    height: 250px;
    -moz-animation: scale 0.5s; /* Firefox */
    -webkit-animation: scale 0.5s; /* Safari and Chrome */
    -o-animation: scale 0.5s; /* Opera */
    animation: scale 0.5s;
}
@keyframes scale {
    from {
        width:0px;
    }
        to {
            width:500px;
        }
    }
    @-moz-keyframes scale { /* Firefox */
        from {
            width:0px;
        }
        to {
            width:500px;
        }
    }
    @-webkit-keyframes scale { /* Safari and Chrome */
        from {
            width:0px;
        }
        to {
            width:500px;
        }
    }
    @-o-keyframes scale { /* Opera */
        from {
            width:0px;
        }
        to {
            width:500px;
        }
    }
}

Answer 1

This snippet assumes that you want to reserve the space for the expanded image from the start - ie so that its expanding does not alter the position of surrounding elements.

It replaces the img element with a div of the appropriate size and attaches a pseudo element to that which has the required image as background and which animates on the X axis from scale 0 to full size. This makes the image expand from the center rather than the left.

.expandimg {
  width: 500px;
  height: 250px;
  position: relative;
}

div::before {
  content: '';
  animation: scale 0.5s;
  background-image: url(https://cdn.pixabay.com/photo/2020/04/01/01/02/science-4989678_960_720.png);
  background-size: cover;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  position: absolute;
  width: 100%;
  height: 100%;
  display: inline-block;
}

@keyframes scale {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(100%);
  }
}

<div class="expandimg"></div>