CSS Transitions with Just One Property, by Lea Verou
Join the DZone community and get the full member experience.Join For Free
Innovative web programming is an interesting test-case for strength-testing -- because, half the time, you're testing the limits of web technologies just as much your own strength as a programmer. As a result, developing under the (okay, decreasingly) severe constraints imposed by existing web technologies can really help you hone your coding skills to ninja-level acuity.
The proliferation of styling hammers in CSS3 has led to the modularization of the CSS3 standard -- a wise decision by all accounts. Now CSS can do a lot of things, with a lot of tools.
But what if you want to push just one CSS3 property -- and your development skill -- to the max?
Well, who better to maximize a CSS property than Lea Verou?
That's what she's done with Animatable, her new CSS hover demo. Her challenge, specifically, is:
What kind of transitions can you create with only one property? This is what my new experiment, animatable aims to explore.
As usual, her code is clever and simple. For instance, she creates a sliding striped background like this:
<a data-property="background-position" data-from="0 0" data-to="100% 100%" style="background-image: linear-gradient(-45deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black); background-size:50px 50px"></a>
But that's just one of 39 effects -- most of which are a lot cooler than sliding stripes.
Opinions expressed by DZone contributors are their own.