How to make Transitional Interfaces, Coded using CSS3

It’s a quick read that 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.

In the pop-up details view example, the list item is grown in size by using transform: scale(X); Behind it, the list is hidden from view by also using a scale transform. It makes itself much smaller and hides behind the expanded list item, which transforms many times the size of itself to compensate.