Bounce Animation On A Scaled Object

What is the best way to have an object scale and then perform a bounce animation at that scale factor before going back to the original scale factor. I realize I could do something

Solution 1:

You can try the use of CSS variable in order to make the scale factor dynamic within the keyframe:

functionmyFunction(id,s) {
  var image = document.querySelectorAll('.test')[id];
  image.style.setProperty("--s", s);
  image.classList.remove('bounce');
  image.offsetWidth = image.offsetWidth;
  image.classList.add('bounce');
}

div.test {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: blue;
  margin: 50px;
  transform:scale(var(--s,1));
}

.bounce {
  animation: bounce 450ms;
  animation-timing-function: linear;
}

@keyframes bounce {
  25% {
    transform: scale(calc(var(--s,1) + 0.2));
  }
  50% {
    transform: scale(calc(var(--s,1) - 0.1));
  }
  75% {
    transform: scale(calc(var(--s,1) + 0.1));
  }
  100% {
    transform: scale(var(--s,1));
  }
}

<divclass='test'></div><divclass='test'></div><divclass='test'></div><div><buttonclass='butt'onclick='myFunction(0,"2")'>first</button><buttonclass='butt'onclick='myFunction(1,"3")'>Second</button><buttonclass='butt'onclick='myFunction(2,"0.5")'>third</button><buttonclass='butt'onclick='myFunction(1,"1")'>second again</button></div>

Solution 2:

Dispatch each transform on a different wrapping element. This way you can achieve several level of transforms, all relative to their parent wrapper.

Then you just need to set your animation to fire after a delay equal to the transition's duration:

btn.onclick = e => {
  // in order to have two directions, we need to be a bit verbose in here...const test = document.querySelector('.test');
  const classList = test.classList;
  const state = classList.contains('zoomed-in');
  // first remove previous
  classList.remove('zoomed-' + (state ? 'in' : 'out'));
  // force reflow
  test.offsetWidth;
  // set new one
  classList.add('zoomed-' + (state ? 'out' : 'in'));
};

div.test {
  position: relative;
  display: inline-block;
  margin: 50px50px;
}
div.testdiv{
  width: 100%;
  height: 100%;
  transition: transform 1s;
}
div.test.zoomed-in.scaler {
  transform: scale(2);
}
div.test.zoomed-in.bouncer,
div.test.zoomed-out.bouncer {
  animation: bounce .25s1s;/* transition's duration delay */
}



div.test.inner {
  background-color: blue;
  width: 50px;
  height: 50px;
}


@keyframes bounce {
  0% {
    transform: scale(1.15);
  }
  33% {
    transform: scale(0.9);
  }
  66% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.0);
  }
}

<divclass="test"><divclass="scaler"><divclass="bouncer"><divclass="inner"></div></div></div></div><buttonid="btn">toggle zoom</button>