A subtle effect on the CSS Tricks site that I've always liked, is the nudged links in the footer of the page.

With recent chatter about Progressive Enrichment I thought it would be fun, and rather quick to show off his effect using just CSS.

READER DISCOUNTSave $50 on terminal.training

I've published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.

CSS

The CSS is marked up so the effect hover effect works as normal in all browsers:

li a {
  color: #eee;
}

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

CSS Animations

With a single line of CSS and zero JavaScript we can enhance the experience for users using browsers that support CSS animations:

li a {
  -webkit-transition: padding-left 300ms ease-out;
  color: #eee;
}

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

Demo

Take a look at the demo.

https://jsbin.com/ehaja/ (edit)

Thoughts

My gut feeling is this effect looks a bit odd without the animation, but it's because the jarring 20px jump. However, there's definitely room for CSS transitions and animations, though aside from the status of the document, I can't see where it's up to on the W3C site...

As soon as there's support for CSS animations and transitions in Firefox as well as Safari, I'm going to start deferring JavaScript animation effects over to the CSS.