Over a million developers have joined DZone.

Drive the animated CSS car down the SVG road

DZone's Guide to

Drive the animated CSS car down the SVG road

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

CSS beat straight HTML because CSS lets browsers actually do something. Instead of producing a static grid, like crudely bitmapped page, CSS sends a some chunks of instruction to the browser: take this, then do something to it. Replacing description with instruction is at the heart of modern computing, but (as web developers especially know) not all technologies have caught up.

Bitmapped images, for example, are notoriously old-fashioned. They just identify which dots to light, and how. Vector graphics are, in a sense, the opposite -- the object itself is represented by a mathematical formula -- but the formula is still a (much-simplified) description. SVG files are written, after all, in a markup language (however eXtensible).

Now CSS animations meld the markup and more complex instruction by letting the browser do a lot more dynamic work. And we've definitely seen some awesome CSS3 animation lately.

But today, another step along the path of instruction: a sweet new CSS animation along a path at constant speed.

Here's what you get:

SVG path on the left, CSS on the right, results on the bottom. Unlike my antiquarian bitmap, the real thing shows the little car running around the (SVG) star.

And the code is all quite simple (if a little tedious for sorta-right-brainers like me).

Experiment with the paths and peruse the code here.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda


Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

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

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

{{ parent.tldr }}

{{ parent.urlSource.name }}