css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Live coded in ~30min on the 17th of May 2016. See also my 2nd pure CSS animated 3D graph. Tested & works in current Chrome and Firefox on Windows 7. Won't work in IE because it uses transform-style: preserve-3d. Won't work in Edge either because it uses both filters and 3D transforms.


  1. I like this clever animation keyframes,
    You put only the beginning of the animation, letting you define the end in each .bar :)

    Maybe it is obvious, but I think I did need this pattern, instead I ended up with a lot of differents keyframes defs...

  2. @long-lazuli Yeah, I like this technique. I like stuff that helps with reducing the amount of generated code in general... as you may have noticed. ;)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.