Examining the two charts above, one may notice a symmetry in the curves of an object in freefall and one bouncing on the ground. This symmetry is a result of gravity.

Gravity is unique to each celestial body depending on how much stuff it’s made of, and how dense that stuff is. Earth’s unique gravity signature is familiar to us, and so by association, anything following that signature also feels familiar.

Furthermore, anything not in line with Earth’s gravity would be jarring to witness on Earth. For instance, imagine witnessing a ball which appeared to bounce in slow motion, or one which bounced higher and higher, or a ball which popped in and out of existence depending on its height — it would be a disturbing experience in physical reality.

Digital user experiences, however, are not bound by strict laws governing the physics of movement; designers are essentially left to their own devices to come up with a physics pattern and apply it effectively to their design. This do-it-yourself culture around animation introduces a risk factor, and designers don’t really get a share of the project’s “risk budget,” which is usually reserved for new tech, so this often takes animation off the table for smaller teams.

With that said, you’re not completely in the dark when using CSS. You have useful tools and defaults to get started, and with some basic knowledge, you can begin introducing a pleasant animated experience for your users.