Previously I’ve talked about using ease-in and ease-out to enhance motion design. Those properties might also be called friction and inertia, both products of gravity.

Gravity is also a mood: heavy, intimidating and ponderous or light, engaging and playful. By recreating those kinds of movements using CSS, we can enliven our site interfaces with engaging motion. A simple example is the bouncing ball at the top of this article, the motion of which might be used to notify the user to a vital alert message. The markup is a single <div> element, styled and shaped to resemble a ball:

#redball {
	border-radius: 50%;
	width: 20vw; height: 20vw; 
	background-image: radial-gradient(ellipse farthest-corner at 25% 25%, #f00,#000); 
	margin: 0 auto;
}

Then the CSS to move the ball, with some values derived by the work of Albie Brown, shown sans vendor prefixes for clarity:

@keyframes bounce {
	from, to {
		transform: translateY(30vh);
	}
	80% {
		transform: translateY(15vh);
	}
}

I’m using vw and vh units to size the ball and its motion so that both are completely responsive in modern browsers without any need for @media queries.

To call this animation on the ball:

#redball {
	transform-origin: center bottom;
	animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
}

Note the altered value for transform-origin, which makes it easier to position the element (especially if it is rebounding from another object), as well as adding a touch of realism to the next step we will take.

By itself, this animation creates the illusion of gravity, but not its complete effect: a soft object like a rubber ball will compress slightly when it hits the ground, expanding as it recoils. Disney calls this squash and stretch motion “the most important principle of animation”. Artists use it to provide characters and objects with life and realism. It’s not difficult to achieve with CSS, by adding a scale to the CSS transforms that already exist in our animation:

@keyframes bounce {
	from, to {
		transform: translateY(30vh) scaleY(.98);
	}
	80% {
		transform: translateY(15vh) scaleY(1.02);
	}
}

The degree to which squash and stretch is used depends partly on the object, and partly on the style of animation: some kinds of anime will take this to an extreme degree, for example.

Of course, there’s one other unrealistic aspect of this animation: the fact that it goes on forever. In the next article in this series, I’ll explore adding natural decay to your CSS motion designs.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/RNaGqj