Uncharted Territory

With the addition of the CSS3 transition property comes a lot of uncharted territory. Never before has it been so easy to bring animation into a usable, standards-based browsing environment. Determining how often and to what degree one should use animation on a web build can be tricky. As we evaluate how to implement animations from project to project, we’ll need to carefully consider how it might affect user experience. Here are a few observations I’ve made from the field.

Consider the Psychology of Motion

Motion demands attention. When someone is trying to find you in a crowded room, what do you do? Wave. When check engine lights go from illuminated to flashing you know it’s time to take the car in for service. Websites are no different. When you’re deciding whether or not to continuously animate an element by spinning or panning, consider the content.

content graph
I’d say it’s a general rule that the more content you have on a page, the less motion you can get away with using. I think the FWOD 404 page is a great example. It’s got a gigantic planet spinning, but there is only a phrase from which it pulls one’s attention. Now, I’m talking about animations that happen regardless of where the user clicks or hovers. Links & navigation items are a completely different ball game.

Linking & Navigation

I really enjoy adding the transition property to make links & menu bars fade in and out, but I have to be careful. If the transition is too slow, users may fail to pick up on the visual cue that says, “This is clickable.” Slide your mouse pointer horizontally across each navigation bar of the examples below.

Notice how with the first row, you can make it all the way across the bar with no hover state clearly appearing. Sure, users can probably figure out that these are links, but why progressively enrich if it degrades user experience? The second option brings in a more immediate hover with a nice, slow fade.

It’s all been done before...

...with Flash. Most people don’t know or care about the difference between animations done with Flash, Javascript or CSS3. Seeing things moving online is nothing new for users, and while the design & development community may be thrilled to have a simple and software-independent solution for transitions, we’re still going to have to learn to use them wisely.

Ads by Fusion

35 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Reagan Ray

    I’m having trouble seeing this in IE.

    • Trent

      You’re one of the few people I know that can get away with that!

  • Robbie Manson

    So glad you’ve written about this Trent. I’m biased about the reasons for liking these new transitions and animations, because I’m interested in their implementations and how I can use them in my own projects. In this sense, my viewpoint is detached from that of the ‘everyman’, to whom the implementation is irrelevant. He experiences only the effect.
    When I use a Flash site, transitions similar to those now being widely adopted using Webkit (and by myself, I might add) actually frustrate me. Again, I’m not a big fan of Flash, so there is a certain amount of bias involved.

    With regard to the health of design on the web as a whole, my concern is that the popularity of often frivolous or gimmicky new CSS properties come to have an overt influence on the development of our designs, instead of merely augmenting them. It’s great to enhance user experience when we can, but it’s important to have restraint and assess what real value you’re adding to a site when implementing such technologies.

    • Trent

      I agree completely. One could argue that my panning animation above is a bit overkill, but this is only a blog after all.

  • Ethan

    I could just stare at that title forever. Really neat stuff, Trent.

  • Christopher Meeks

    First off, the animations you use on this page are the best example you can show for SUCCESSFUL animation. I didn’t notice the header color transition at first, which is perfect.

    Another point I wanted to make is that you can easily apply your rules for animation to design in general.

    i.e.
    Don’t distract from the content.
    The more content, the less overall “fluff” one should add to a design.
    Don’t add to a design if it deteriorates user experience.

    • Trent

      What a nice thing to say, Mr. Meeks. I’d kind of like to see something similar to this implemented within a tiny 3-4px horizontal stripe on a site. Hrm, I just may go and do that.

  • David Arnold

    Don’t you wish flash came with warnings like this 6 years ago?

    One huge plus to things like animations through CSS3 is that they are forward compatible with most mobile devices. That header looks excellent on my phone without adding additional load time and clutter.

  • Dan

    Love the header, an elegant use of CSS3 animations. As always another great article. Thanks

  • Bryan Rees

    Beautiful article, and great reminder. I’m glad to see so many designers taking the time to say these things before CSS3 and HTML5 get out of control.

  • Om Ipit

    i hope all device and all browser support this animation. i have an example for CSS 3 check this for another example: http://bit.ly/bPbGXl

  • Marco Sousa

    nice read :) the title is awesome, and pointing out the speed of the animation in the buttons is really one of those thumb rules for these animations.

    like you pointed out this has all been done in flash so make no mistakes, no1 is re-inventing the wheel here, just making it spin using a different technique.

    P.S. the title transition can be seen on INSPIRE (adobe xd blog : https://xd.adobe.com/ )

  • Micah

    Hi I was just wondering what font you used for the title “CSS THREE IN TRANSITION.” It’s very smexy. Thanks!

  • ivan

    Hello, just found this and now I am sitting here and browsing your site for an hour now...
    thanks,
    ivan

  • Danel

    I love the header awesome, can you place a tutorial. on how it was done?

  • Trent

    @Danel: Let me see if I can wrestle up the time to do that. In the meantime, feel free to pick apart the code for this post, as well as this more experimental version.

  • Fabiën Tesselaar

    Hey,

    I tried to recreate the effect, but I was a little lazy. I didn’t really get the use of z-index so I removed the holder-box and just placed the transparent image inside. Then I didn’t really get how to create a gradient that would look good while looping the animation. Well I came up with


    @-webkit-keyframes ‘text-effect’ {
    0% { background-position: left bottom;}
    50% { background-position: right bottom; }
    100% { background-position: left bottom; }
    }

    Which allowed me to make very simple gradients and it just flows like a pro. Everything works pretty good so I thank you for that, but it left me with one question. Howcome do I need to specify a height (let’s say the image is 400px by 400px) I need to set the height to 390px, otherwise some of the gradient shines at the bottom of the image. I tried removing the margin or padding but that didn’t really help.

    Anyway transitions rock. The use of animations I have my doubts on (marquee and whatever html tags #_#), but for now let’s say they are very nice.

  • Tony

    @Reagan Ray: Try IE 9!

  • David

    I’m trying to replicate the example 2 links - how did you suppress the transition for the fade in and leave it for the fade out? I must be missing something obvious.
    Great post though - I wonder how prescient this warning will feel once transitions really catch on.

  • Trent

    @David: You can probably just specify the transition timing for both the a and the a:hover individually.

  • CSS Blog (Heiko)

    Great article Trend! CSS Transition and all those new css3 features in my eyes will be the best things in developing websites 2011! You don’t need always Javascript or Flash for small animated site elements, jst some lines of CSS3.

  • Craig

    Nice work. Very well done. As a Flash developer I like seeing how CSS is progressing (jQuery and HTML too). Unfortunately (like Flash) we WILL see CSS animation abuse in the future - same with HTML5 canvas.

    Clearly these demos don’t work in IE or Firefox. I suspect IE9 will be more than capable as I’ve already heard wonderful things about the beta. But what about Firefox?

  • JGarrido

    How is it the background of any text I select on this page is red (instead of the standard blue I typically see), in both FF and Chrome?

  • JGarrido

    Ah nevermind, I just answered my own question after inspecting the hex value with ColorZilla and then searching your stylesheets - very clever, I was never aware of that property, so thanks!

  • Trent

    @JGarrido: No worries & thanks for noticing that— definitely some of my favorite little touches you can do via CSS...

    ::-moz-selection{ background: #db1010; color:#fff; text-shadow: none; }
    ::selection { background: #db1010; color:#fff; text-shadow: none; }

  • kokogo

    Great article Trend! CSS Transition and all those new css3 features in my eyes will be the best things in developing websites 2011! You don’t need always Javascript or Flash for small animated site elements, jst some lines of CSS3.

  • James Baker

    Oh man, combined with TypeKit, something like http://www.underconsideration.com/artofthemenu/archives/maudies.php could be done live, on screen, animating… I would be drunk with power to do that…

  • Calvin Tennant

    @Reagan Ray: What a troll.

  • bernards helim

    You don’t need always Javascript or Flash for small animated site elements, jst some lines of CSS!!

  • Philip

    @ james, i think so too.

  • Dennis

    @ everybody: so far the best I could find on the web.
    Used it on my new website for the logo: http://www.designlike.de

    Thanks a lot @ Trent
    (if you like, I could also put your link in the markup, just let me know)

  • Henning

    @Bernards: Yes right, and it makes the code more slim.

  • james

    @Reagan Ray: It is that you are using IE that you can’t see the animation. Switch to a ‘modern’ browser and you will never turn back.

Leave a Reply