O'Reilly

Link Nudging with CSS3 Animations

By on  

One of the more popular and simple effects I've featured on this blog over the past year has been linking nudging.  I've created this effect with three flavors of JavaScript:  MooTools, jQuery, and even the Dojo Toolkit.  Luckily CSS3 (almost) allows us to ditch JavaScript entirely to create the link nudge effect!

The CSS3

The first step is defining the animation for element's "natural state":

#animateList li a {
    cursor: pointer;
    transition: padding-left 250ms ease-out;
    /* trans pattern:  property duration timingMethod delay */
}

The animation above is a fairly routine, smooth animation in padding.  Now that the transition animation property is in place, let's assign it to the same group of elements when they are hovered over:

#animateList li a:hover {
    padding-left: 20px;
}

When the matching anchor elements are hovered, the links animate from left to right once over 250 milliseconds with an ease-out transition.  Boom!  Link nudging without any JavaScript!

Of course CSS is and always will be quite limiting with animations because they don't allow for callbacks and events like JavaScript does.  If you're just looking for a simple animation, however, CSS provides everything you need!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

Incredible Demos

  • Create a Simple News Scroller Using Dojo

    My journey into Dojo JavaScript has been exciting and I'm continuing to learn more as I port MooTools scripts to Dojo. My latest experiment is porting a simple new scroller from MooTools to Dojo. The code is very similar! The HTML The news items...

  • Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Discussion

  1. this is not for now, ff 3.6 can’t do this :'( we have to wait 5 years for use it !

    • Nope, looks good in Firefox 4 beta.

    • I know but my clients are on ie6 and ie7 (like 10 % of user)… or we have to make ie version, ff version and webkit…

    • ff 3.6 is obsolete

    • Neil Monroe

      Using FF 3.6.13 it does work, but there is a lot of processing going on, so it is very slow.

      It is a nice proof-of-concept and shows that the web will very much more dynamic in terms of design and what we can do with CSS 3 in the coming months/years. Exciting times are ahead!

    • Something like this is a garnish, not the main thrust of the website it appears on. Code with some forward-thinking to it; it’ll look nice in better browsers, and in later versions of Firefox. It’s not the end of the world if the padding doesn’t work in every single browser.

    • This comment really irritates me. Why does it mean you can’t use this? Because it doesn’t look the same in every browser, means “oh no, I’m not allowed to use it”?

      We need to educate our clients in the web, and what it can and can’t do. If your client has to use IE6 for some reason, then that’s just unfortunate. But is your client always going to be the only one viewing their website? Can’t you reward their customers who visit their site with modern browsers?

      I wish people who think the same thought as your “we have to wait 5 years [to] use it!” comment would keep your thoughts to yourselves, or wake up and realise that website’s don’t have to look the same in every browser.

      /sigh

    • You’re spot on Kate!

      Love the link too

      Unfortunately some people do expect sites to appear the same in all browsers still…

      I /sigh too….

    • @Daniel – I’ve been there. Not much is worse than being expected to make a complex site look the same in IE6/NS4/AOL9 as the latest versions of Firefox/Safari/Chrome/Opera.

      I think the best thing for everyone to do is educate people that the web is not print and that there are so many variables affecting how a site is viewed (screen size, resolution, orientation, mobile vs regular computer, the list goes on) that it’s impossible to make a design look identical across the board, and to try is an effort in futility these days (as we’re finding out, yet again, with the advent of tablets a la iPad and the growing number of variations in Internet-capable mobile devices). (Whether you actually take/continue the job and what you do with it is ultimately up to you, though.)

    • @Kate – Your link looks the same in all browsers.

      Also, when you design a website for a client and they sign off on the look and feel that you’ve put forward in your proofs you better believe that is exactly what they expect to see ‘in every browser.’

      I feel it’s total lack of effort to not attempt to make the sites you design/program to look as close as possible.

      In this case however, it is purely an effect that really is useless anyhow so is it a showstopper, no. A 250ms animation over 20px might just as well not be there anyhow.

    • Does that mean you’re waiting for full cross browser support to use CSS3, when you say you have to wait five years to use it? I assume, then, you’re not using CSS2.1, right? After all, it doesn’t have full cross browser support, either (and last I checked, technically isn’t finished).

      If we waited for full cross browser support to implement anything, web site design would be even more stagnant than it was when IE6 had 90%+ market share.

    • Since when do web sites need to look the same in every browser?
      Progressive enrichment FTW! :)

  2. @ Chrome 2 works perfect :)

  3. formermember

    it’s called progressive enhancement… don’t complain about it NOT working in this browser or that browser. I

  4. Hence the use of the browser prefix! If you cannot use CSS3 than use JS as a fall-back. Does anybody know when Opera intends to implement this?

  5. Risto

    why, oh why?!
    this link nudging adds nothing to the usability of a link.
    just because it can be done, doesn’t mean anyone should make their users play ‘whack-a-mole’ with links

  6. It’s nice of course, but in practical use, JS is still the way to go for things like this to ensure cross-browser compatibility – I see no use to it. You can’t realistically implement web-kit-only features like this when the fall-back directly affects usability on all other browser engines.

    (And yes, progressive enhancement etc., but in this instance it doesn’t apply, for reasons mentioned above.)

    • The only thing that’s “webkit-only” is the animation (and only because FF4 isn’t out yet). The shift itself is/can be cross browser. And how does it affect usability, aside from the fact that such nudging itself isn’t really an expected reaction? The link target grows in size (if you mouse over the leftmost point you can for the links, you can still click said links after the nudge) and doesn’t affect the other elements (so things aren’t jumping around).

  7. This works just dandy in Opera too, but you need to add -o-transition: padding-left 250ms ease-out;

    Please add it to your examples and demo, thanks! :)

  8. I’ve been using this for my blog title for two to three months and even added color transition to it. lol

    Perfect for Chrome and Moz. Firefox 4 BETA. Safari can also support it. I don’t know about IE and Opera though. (IE is always forgotten)

  9. Bro, Can I have the effect which you’ve given to you – “Follow Me” widget please??

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...