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

It depends on what you want the final result to be. Do you want the image to take up that full width at the end but not at the start or to have an element taking up the full width right from the start and the image just appearing from its middle (ie what is the effect on following elements' positioning to be?) — A Haworth, Oct 22 '21 at 09:31

score 0 · Accepted Answer · answered Oct 22 '21 at 10:21

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>

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

1 Answers1