Posted in CSS3, Facebook, Featured, Social Media, Tutorials

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

CSS3 quickie: The Facebook loading animation

After the couple of jQuery Quickies that have been placed online on this website, I today present you a CSS3 quickie. Just a short walkthrough to create a simple effect, to learn some basic stuff. In this case, we’re recreating the Facebook loading animation using CSS3 animations. I’m pretty sure that you’ve seen the animation before, if you’re a Facebook user.

Facebook loading animation

We’re using CSS3 keyframes to create the desired effect. We’ll be using prefix free from @LeaVerou to use unprefixed CSS3 properties.

Demo Facebook loading animation
Download Facebook loading animation

Take note this example only works properly in browser that support the keyframes property. I’ve tested this script and verified that it’s working in the latest versions of Firefox, Chrome and Safari.

Read more…

Marcofolio.net ()

Like this post? Share It :
  • Print
  • email
  • PDF
  • Google Bookmarks
  • Facebook
  • Twitter
  • MySpace
  • Yahoo! Buzz
  • del.icio.us
  • Digg
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Reddit
  • Technorati
  • Design Float
  • RSS

Related posts:

  1. 26 Fresh jQuery and CSS3 Tutorials From 2012
  2. Recreating the IBM Lotusphere logo in CSS3
  3. 10+ Free HTML5-CSS3 Website Templates
  4. 3 WordPress Facebook Plugins. Hunting Down the Most Effective One
  5. Animate a Custom Dialog Box with CSS3 and jQuery

Comments are closed.