How to Keep an Element Centered During CSS3 Scale Animations?

Maintaining Centered Origin during CSS3 Scale Animation

In CSS3 animations, scaling an element can sometimes lead to it being off-center if the transform-origin property is not configured correctly. Here's how to address this issue and ensure the element remains centered throughout the animation.

The key to preserving the centered origin is to include the original translation (i.e., the center-point) within the transform property of the animation. This is because applying a new transform overrides any previous ones. By adding the translation, we maintain the element's initial position.

Here's the adjusted CSS code:

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

.to-animate {
  transform: translate(-50%, -50%); /* Maintains the original position */
}

With this adjustment, the element will maintain its centered position during the scaling animation, ensuring that the origin (blue square) remains aligned with the center of the other container (red square).

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