CSS Transitions: Masks

CSS transitions are an animation technique that works in all WebKit-based browsers (e.g., Safari and Chrome). It requires minimal JavaScript (just swapping out classnames, so you could even apply them to links using only the :hover pseudo-class.) Best of all, the transitions are hardware accelerated, even on iPhone.

On a client project, we needed a way to "brand" an Ajax loader image. That is, we wanted the color of the spinner to match the color of the design without generating a new GIF for each site. We found a solution using transitions, masks, and a 24-bit PNG. The only thing we have to change is a background color in CSS!

Click me

Was this page useful to you? Loading...