Happy Easter CSS3 animation | Hacker News Reader

Happy Easter CSS3 animation

marynaaleksandrova.info

55 pointspodviaznikov23 comments

Works great, catchy tune, sounds like an Apple commercial. * Worked on ipad 3 nicely * Worked halfway thru on iphone 4s, it broke right before the Red line came in.

Did you use a tool to output the CSS animation?

The only tool I used is http://prefixr.com/, everything else handcoded:)

Is there a licence on the music? Is it stock music? The animation was nice. Does anyone where you can buy similar music like that for reproduction in startups videos.

http://audiojungle.net/item/playground-fun/408719?WT.ac=cate... - this is the music, I used. Check this author and children's category. Also this author http://audiojungle.net/user/Concept36/portfolio?WT.ac=item_p... has some nice melodies.

The dancing eggs remind me of the dancing muppet chickens: http://www.youtube.com/watch?v=tLdYI8zk4QQ

This gives me more ideas! haha:)

Why not a browser-freezing CSS3 "animation"? https://ajf.me/stuff/htmcraft/200blocks

Worked great on my iPhone 4 but animation didn't complete on my Samsung tab. Love to see this done with less or sass.

My reaction to this was complete awe, which was compounded when I saw the CSS source. Awesome demo!

Thanks:)

Remember, the Easter Bunny died for your cssins!

haha:)

cool stuff. worked good on my macbook air

http://marynaaleksandrova.info/labs/happy-easter/style.css (6500 lines of CSS)

What you save in CPU is heavily outbalanced by what you lose in code maintainability and bandwidth

No sane person would write it like this. Have code generate the styles for you. The animation is nice though.

Thanks, I used http://prefixr.com/, everything else handcoded:)

156kB?

Save in CPU? Mine was pegged the whole time.

Were you using a browser which supports hardware accelerated animations? On my Macbook Pro (last gen), my CPU mostly stayed around 10-15% when viewing the site with Safari.

My CPU barely worked at all. (latest MB Pro).

I peeked at 5% CPU utilization in Chrome on Win7.

it's likely only 1000 lines of less, sass, scss, or stylus which can be well organized into modules and output compressed css if bandwidth is a concern. It would also be possible to only deliver the css applicable to the user's browser (the vast majority of the lines are redundancies due to vendor prefixes). I don't see it being the case that you couldn't optimize the file size down to about the same size as the equivalent jQuery animation.

I have never work with anything you mentioned, and actually didn't ever felt that I need them. While doing this one, I really understand that I need something to cut down code. So definitely will use them next time!

Reply on news.ycombinator.com