Try to search your question here, if you can't find : Ask Any Question Now ?

CSS transition scale() – weird delay

HomeCategory: stackoverflowCSS transition scale() – weird delay
Avatarbhawya asked 5 months ago

Hey all,

Run the code snippet below – clicking on the circle to toggle the animation. What should be happening is, the child should appear as if it’s not moving as the parent container scales.

This is achieved by scaling down the child component at the same ratio that the parent is scaled up (parent scaled to 4, child scales to 0.25).

When the animation is complete the scale is correct, however during the animation it looks like they are not scaling in unison.

It’s almost as if the parent scales first, then once complete the child scales.

Is this some sort of browser limitation? Or am I doing something wrong?

Thanks!

const outer = document.querySelector('.outer');

outer.addEventListener('click', () => {
  outer.classList.toggle('outer--active');
});
body { overflow: hidden; }

.outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: top left;
  transition: transform 1s;
  cursor: pointer;
  border: 1px solid black;
}

.outer--active {
  transform: scale(4) translate(-50%, -50%);
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg') center repeat;
  transform-origin: top left;
  transition: transform 1s;
}

.outer--active .inner {
  transform: scale(0.25) translate(-50%, -50%);
}
<div class="outer">
  <div class="inner"></div>
</div>
1 Answers
Best Answer
AvatarMatthias answered 5 months ago
Your Answer

1 + 20 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com