Learn how this elastic ease generator uses CSS to output pure, clean, and accurate elastic ease animations for your development.

As someone who’s created countless CSS animations, one thing I’ve always missed is elastic ease for keyframes and transition. Yes, you can use JavaScript libraries and other trickery (which we’ll get to in a moment), but, being the purest that I am, I’ve dove into the subject, checked out current solutions, learned the math behind it all, and built a CSS elastic ease generator that outputs a pure, clean, and accurate CSS animation code.

What is elastic ease in CSS?

First, let’s try to better understand the elastic ease motion of an object. Let’s look at a red ball moving from point A to point B:

The ball starts at point A, moving toward its destination to point B, but it overshoots point B by some margin, effectively moving away from it. Then, it starts to slow down, stops, and starts moving in the other direction, back toward point B. It once again overshoots point B — this time by less margin — and continues repeating this pattern while decreasing the margin each time until it finally stops.

Here’s what elastic ease movement looks like on a graph.

1. The ball’s starting point
2. Initial movement
3. Over-shooting the destination
4. Repeating the pattern
5. Endpoint

#css #web-development #webdev #programming #developer