cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
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.