Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?

Designing and developing UIs for the mobile web is tricky, but it’s extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.

In today’s tutorial, we’ll be creating some creative animations and transitions for adding and removing items from a list, inspired by the concept from Pasquale D’Silva’s article on Medium. Chris Coyier coded the transitions from Pasquale’s article.

In this tutorial I’m extending Pasquale’s example, adding more animations and transitional effects, and I’ll also be using a small snippet from Chris’s article to add an extra step in each animation, which “makes room” for the added items before they are actually added.