Link Nudging with CSS3 Animations
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!
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
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! :)
@ Chrome 2 works perfect :)
it’s called progressive enhancement… don’t complain about it NOT working in this browser or that browser. I
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?
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
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).
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! :)
Opera is often forgotten …
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)
Bro, Can I have the effect which you’ve given to you – “Follow Me” widget please??