# Bounce effect

A delightful transition detail

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!

## Get in touch

I'm not currently looking for freelancer work, but if you want to have a chat, feel free to contact me.