Bounce effect

I'm a fan of subtle transition effects. One example of such transitions is a bounce effect, which I have implemented with CSS like this:

For a quick copy-paste solution, here's the magic:

.bounce {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

To understand where the bounce comes from, take a look at the curve behind the motion:

The transition curve is between two points: x = 0, y = 0 and x = 1, y = 1. The coordinates in the cubic-bezier() method are the handles for those points. The handles determine the curve shape, which will be used in a transition.

Can you spot the part of the curve that causes the bounce? It's the area that goes beyond the y-axis value of 1:

Imagine moving from the x value 0 to 1 and then applying the y value as the transition value as you go. Say you have a scale property you want to animate. The transition would take the initial value, use the transition duration, and smoothly apply values based on the y value until the destination value is reached.

That's it, keep on bouncing!