CSS Transitions: Opacity

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.

Based on other experiments, I gained the impression that opacity was not a property that is hardware accelerated on iPhone. However, Apple's own docs say it's "performance-enhanced" (whatever that means). This experiment is designed to isolate just the opacity property to see what is really going on. Turns out, it's pretty nice.

Simple

Click/touch the element below to see it fade out.

Fade-through

Click/touch the element below to initiate a fade-through of one element to the other, overlapping by 50%.

Was this page useful to you? Loading...