Is there a easing function that animates slower in the middle, and faster at the beginning and end?
The easing functions I've seen so far are: ease
, ease-in
, ease-out
, ease-in-out
.
ease
seems pretty similar to ease-in-out
, which slows the animation at the beginning and end. I kind of want the opposite of that.
I'm creating a javascript animation to animate properties that can't be animated by CSS, such as linear-gradient
.
There isn't a standard predefined one like what you're describing. But you can create a custom animation with a custom 'cubic-bezier' ease.
The alternative is to bring in a custom easing library
https://developers.google.com/web/fundamentals/look-and-feel/animations/custom-easing?hl=en