How to Keep an Image Centered During CSS3 Scaling Animations?

How to maintain a centered image during animation?

In a situation like the one shown in the fiddle you provided, where a CSS3 animation scales an element in the absolute position of another element centered in the center, you might encounter a misalignment of the element during animation. Specifically, it might appear off-center, as demonstrated by the red squares in the fiddle.

To remedy this, we can modify the transform-origin property. The issue arises when the new transformation (within the animation) overrides the original one. In this case, the original transformation serves to maintain the element's centered alignment.

To circumvent this problem, we must combine the transformations within the same transform property, ensuring the correct order. The following code illustrates the corrected approach:

@keyframes ripple_large {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

The above is the detailed content of How to Keep an Image Centered During CSS3 Scaling Animations?. For more information, please follow other related articles on the PHP Chinese website!