Grow your CSS skills. Land your dream job.

Transitional Interfaces, Coded

Published by Chris Coyier

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.

Check out the coded examples of transitional interfaces on CodePen.

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.

Comments

  1. I was working on something similar, seems like you managed to finished it quicker (dam you tendonitis!)

  2. Both a lovely idea and a beautiful code.

    And thanks for the link on Transition interface; it seems I missed it. Glad I can fix this mistake, it’s a great article!

  3. Grant Zabriskie
    Permalink to comment#

    Very nice!

  4. I like some of these and dislike others. My main frustration with animations is when they are slow and doing it without the animation would have been much faster.

    For example the last list item. It feels considerably slower than just a box popping up. Where as the second example feels quite fast and I don’t mind the animation as it’s not preventing me from actually taking action.

    Slow animations put a cap on how fast a user can do something so they end up getting in the way. If you are going to try to use animations to create personality in your interface make sure it’s as short as it can possibly be so you don’t slow your users down.

    • Permalink to comment#

      Yes the last one (Details View Brain Clue #2) is really slow on Win 8 / Chrome for me. All the others are pretty smooth.

  5. Permalink to comment#

    Thanks for bringing the idea to code. Great stuff!

  6. This is great post , thanks for sharing.

  7. It’s so annoying that you can’t transition to height: auto. Setting max-height to some value greater-than-what-is-possible works but is a hack, forcing me to embed magic numbers into my code. Unfortunately, 100% doesn’t work as a value for max-height transition to (I’m unsure why not?).

    One place you can remove a magic number however is transform: translateX(-300px); where you can replace 300px with -100%. That is, after all, what you were trying to achieve :)

  8. it’s plain amazing what we can do using only CSS animation. nice work!

  9. Permalink to comment#

    Thank you Chris for sharing useful idea and code I am working on project and I found your blog at right time. :)

  10. Love the horizontal sliding list summary example <3
    Should works with CSS transition too by adding a special class to the active element.

  11. Ian Lusk
    Permalink to comment#

    Works beautifully on desktops! I love it! I did run into troubles with my iPad though. Safari didn’t seem to keep up with the animations as well, and the screen would flicker each time I’d add a list item.

  12. Great stuff, gonna use some of it. Thanks for sharing :)

  13. Patrick
    Permalink to comment#

    This is an very effective method, except I had to open Firefox to see it. I was on IE 9 and the new boxes don’t even show up. Perhaps an IE hack may be needed somewhere (or it may just be the work computers)?

    • An IE hack would be a pretty bad idea. However some feature detection is probably required for a real life usecase.

    • Patrick
      Permalink to comment#

      When I tried to add the items with IE at my other job, the items wouldn’t even add. The boxes moved down a few pixels, and nothing showed up. So it would need to be fixed.

  14. Adding the fourth dimension to interfaces is a fascinating concept worthy of further exploration. Thanks for these examples.

  15. Permalink to comment#

    Nice bit of work here. Tricks such as these are really starting to take off and I can’t wait to see them in some good websites.

  16. Is there a reason why, if you were simply expanding the maximum height, you would use keyframe animations rather than css transitions?

    (I guess I’m asking if, assuming you’re not doing the scale animation, keyframe animations or transitions would be most efficient?)

  17. Aurelierm
    Permalink to comment#

    Just spotted a small typing mistake:

    ” It’s a quick read that that ”

  18. Permalink to comment#

    Wow… beauty… what about the browser supports?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".