CSS Animations Tutorials

• By David WalshFebruary 18, 2013

  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...

• By Julien KnebelFebruary 15, 2013

  Build a Street Fighter Demo with CSS Animations and JavaScript

  I recently learned a cool technique from Simurai about how to animate PNG sprites with the CSS3 animations' steps() property. The main idea in this technique is to "recreate" some kind of animated GIF but with the tiles of a PNG sprite. As with...

• 

  
• By David WalshNovember 26, 2012

  Animated 3D Flipping Menu with CSS

  CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

• By David WalshNovember 17, 2012

  CSS Transitions

  There are two ways to create animations with pure CSS:  CSS animations and CSS transitions.  CSS transitions provide a simple method for animation one or multiple properties from one value to another.    CSS transitions do not require @keyframes -- simply provide the desired transition properties to a selector.

• By David WalshOctober 18, 2012

  CSS Fade

  Web developers have been using fade ins and fade outs (basic opacity animation) on their website for years, but the effect needed to be accomplished using JavaScript because CSS didn't have the capability to complete animations.  The tides have turned:  CSS fading is now possible...

• 

  
• By David WalshOctober 2, 2012

  Modal-Style Text Selection with Fokus

  Every once in a while I find a tiny JavaScript library that does something very specific, very well.  My latest find, Fokus, is a utility that listens for text selection within the page, and when such an event occurs, shows a beautiful modal dialog in...

• By David WalshJuly 25, 2012

  CSS 3D Folding Animation

  Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

• By David WalshJune 4, 2012

  Firefox Marketplace Animated Buttons

  The Firefox Marketplace is an incredibly attractive, easy to use hub that promises to make finding and promoting awesome HTML5-powered web applications easy and convenient. While I don't work directly on the Marketplace, I am privy to the codebase (and so...

• 
• By David WalshMay 7, 2012

  Detect DOM Node Insertions with JavaScript and CSS Animations

  I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.

• By David WalshApril 10, 2012

  CSS Animations Between Media Queries

  CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...