Maison > interface Web > tutoriel CSS > Comment garder un élément absolument positionné centré lors des animations à l'échelle CSS3 ?

Comment garder un élément absolument positionné centré lors des animations à l'échelle CSS3 ?

DDD
Libérer: 2024-12-18 06:13:10
original
453 Les gens l'ont consulté

How to Keep an Absolutely Positioned Element Centered During CSS3 Scale Animations?

Comment conserver l'origine centrale lors d'une animation à l'échelle

Lors de l'utilisation d'animations CSS3 pour mettre à l'échelle un élément positionné absolument au centre d'un autre élément, le l'animation résultante peut apparaître décentrée. Cet écart se produit car l'animation remplace la translation initiale qui centre l'élément.

Pour résoudre ce problème et garantir que l'origine reste centrée pendant l'animation à l'échelle, il est crucial de :

  1. Combinez les transformations : Plutôt que de remplacer la traduction initiale, combinez-la avec la transformation d'échelle au sein de l'animation. Cela permet à l'élément de rester centré tout en étant mis à l'échelle.
  2. Spécifiez correctement l'ordre : Faites attention à l'ordre des transformations. La traduction doit précéder la transformation d'échelle pour maintenir l'alignement souhaité.

Exemple mis à jour :

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

.center-point {
  transform: translate(-50%, -50%) scale(0);
}
Copier après la connexion

Avec ces modifications, l'animation de mise à l'échelle conservera correctement la position centrale de l'élément dans le conteneur parent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal