Press Ripple
Press to triggerA ripple ring expands on press — the core Material-style feedback.
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 Ripple */
@keyframes pressRipple {
from { box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
to { box-shadow: 0 0 0 20px rgba(37,99,235,0); }
}
.anim-press-ripple:active {
animation: pressRipple .5s ease-out;
}