I'm revisiting an old navigation idea with an equalizer animation. It's more than 15 years old and was originally implemented using jQuery and jQuery Easie.
Does anyone have an idea how to create this effect with CSS only? Is it possible at all? I've been trying to wrap my head around the CSS animation docs but they are not intuitive to me at all. How do you even chain animation without loosing state?
@yatil That would work indeed but is only similar to the animation: a transition would grow and then directly shrink again. The animation is inert by first slowing down on mouse out and then – with a delay - shrinking back to the initial size.
I tried mimickingthis effect with a custom easing function but didn't get it to work.
@css That's similar but not the same: the transition grows and shrinks directly. The animation is inert by first slowing down on mouse out and then – with a delay - shrinking back to the initial size.
Using a transition would be great though! But I wasn't able to recreate this delay. Tried using custom easing functions but it didn't turn out similar to the animation at all.
@nilshoerrmann It's a matter of playing with the easing and the duration/delay
updated: https://codepen.io/t_afif/pen/pvNJKdr?editors=0110
Still not exactly the same but it can tweaked easily. And if you want more control over the easing check linear() that allows you to create a custom curve
Nils Hörrmann
Eric Eggert
CSS by T. Afif 
