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!

Track.js Error Reporting

Recent Features

  • Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

  • 9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • MooTools Zebra Tables Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors. The CSS The above CSS is extremely basic....

  • Create Digg URLs Using PHP

    Digg recently came out with a sweet new feature that allows users to create Tiny Digg URLs which show a Digg banner at the top allowing easy access to vote for the article from the page. While I love visiting Digg every once in a...

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

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...

  • OSCON Portland:  Conference Giveaway and Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...