Happy Easter CSS3 animation(marynaaleksandrova.info)
marynaaleksandrova.info
Happy Easter CSS3 animation
http://marynaaleksandrova.info/labs/happy-easter/
23 comments
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:)
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
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:)
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!
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.
156kB?
Did you use a tool to output the CSS animation?