↵

Pure CSS animation(codepen.io)

over 5 years ago from Maxime Viktorovich, Web developer

  • Mihai VladanMihai Vladan, over 5 years ago

    Brah...

    Over ~8000lines of code for a 10s animation. If I want to make a 2 min promo video using pure CSS, that would be ~96.000lines of code! With an average code writing speed of 500lines per day, it would take me 192days to make a 2min pure CSS animation. Repeat that out loud...192DAYS, ~96.000lines of code ...for a 2min animation of pure CSS. There's your progress right there...

    Just to clarify, here's my breakdown:

    Visceral Design 10/10 - Work of art! Congratulation to the patience and mastery of the author.

    Reflective Design Over 8000/10 - It makes an awesome story to discuss with friends!

    Behavioral Design -20/10 - Unusable in real life situations.

    All the points you made are great and valid points. However, from a behavioral design, this approach is completely unusable.

    It's like this guy that makes amazing paintings in Excel. I can appreciate the effort he put into making them. I can appreciate the mastery an patience he has. But you don't see designers flock to Excel to make UI design anytime soon.

    As others pointed out, this is art and not necessarily progress in the field of web animation.

    0 points
    • Liam WheatonLiam Wheaton, over 5 years ago

      Lol you're missing the point. This is a demonstration of the possibilities of pure CSS animation—it's in no way suggested that this is an efficient way to animate a 2 minute promo video.

      I'll spell it out for you seeing as you seem to be having a little difficulty. Here are three ideas you can take away from this example (and perhaps use to help progress your own skill set):

      1. This is a great animation made purely in CSS. If this example is possible—perhaps I can consider using CSS to achieve that really simple 4 second mp4/gif/'javascript library + after effects export' animation I've implemented in my project

      2. Because this type of high quality, high performance, responsive animation is possible using CSS, perhaps we should consider simplifying the process to create something similar? Maybe this will be a library, maybe a framework, maybe a web/native app? Maybe a new animation friendly flavour of CSS.

      3. "Wow this is really cool, I thought programming and markdown languages were all scary gross things like math—maybe as a designer I'll start looking into basic html5/css animations and see what cool stuff I can create" ... it's posts like this that get people interested in cross disciplinary skills and further blurs the line between designers and programmers.

      What this post is not saying:

      1. Look at this, it's super cool and easy. You should go and refactor all of your 2 minute animations and videos into CSS. It's way easier than flash.

      2 points