Press Squash
Press to triggerWidens and flattens while held, as if pressed by a finger.
Hold the box down
Triggered by
:active Hold the box down, release, and it replays.
Tune parameters
Interactive animations are driven by pointer state; duration and easing live on
transition / animation — change the numbers in the code below.
Full code
/* Press Squash */
.anim-press-squash {
transition: transform .12s cubic-bezier(.4,0,.2,1);
}
.anim-press-squash:active {
transform: scale(1.12, .86);
}