Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Transitions with Just One Property, by Lea Verou

DZone's Guide to

CSS Transitions with Just One Property, by Lea Verou

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Artificial limitations are a great way to test your strengths. Sure, you can move fifty pounds, but can you do it with one arm?

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.

One language-specific reason for the web's limit-pushing potential? The CSS/JavaScript overlap, whose modern rule of thumb seems to be: what you can code with identical output in JavaScript and CSS, should be coded in CSS -- precisely because CSS is simpler, and less powerful.

So you already know an adage something like: don't use the JavaScript hammer for everything. And you've probably heard the CSS corollary: use every specific CSS hammer for every specific styling nail.

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.

See what you think. Or skip right to the github page -- though it's the combination of ends and means that shows how strong Lea's CSS skills really are.

 

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}