Pasquale D’Silva’s article Transitional Interfaces has really been making the rounds. It’s a quick read that drives home a great point. Transitions and animations can be more than eye candy. They can help give your brain a clue about what is happening on a page.

If a list item is inserted into a list, rather than having it suddenly appear, an animation that moves the list to make room makes it extremely obvious what is going on. Otherwise it’s blink-and-you-miss-it.

The animated GIF’s in the article make it, so go check that out.

Pasquale wasn’t saying do exactly this every time! But they are nice examples so I figured I’d take a crack at making them happen on the web.

Nothing groundbreaking, but a couple of tricks at play.

In the list-item-adding examples, the space is made in the list by at first setting the list items to max-height: 0; and having an @keyframes animation run on them which expands the max-height to 50. Careful there to make sure that number is high enough to cover the space with a reasonable enlargening of text.

The @keyframes only have a to { } block. When the from { } or 0% { } block is ommitted, it just starts the animated properties at whatever they are naturally. Height, opacity, and scale are all used here to make it pop into place.

.new-item { max-height: 0; opacity: 0; transform: scale(0); animation: growHeight 0.2s ease forwards; } @keyframes growHeight { to { max-height: 50px; opacity: 1; transform: scale(1); } }

In the slide-in example, first the space is created in the list, then the item is slide in to that space. That is done by using two different @keyframe animations. One to make the space, the other to do the slide. You can apply them both to a single element, spacing out the time in which they are run.

.new-item { max-height: 0; opacity: 0; transform: translateX(-300px); animation: openSpace 0.2s ease forwards, moveIn 0.3s 0.2s ease forwards; } @keyframes openSpace { to { max-height: 50px; } } @keyframes moveIn { to { opacity: 1; transform: translateX(0); } }

The second animation value has a second time parameter, which is the delay. The delay is the same as the duration of the first animation. So they run in sequence.