4 ms·
Happy Easter CSS3 animation
- jQueryIsAwesome 15y agohttp://marynaaleksandrova.info/labs/happy-easter/style.css 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
- ronaldj 15y agoNo sane person would write it like this. Have code generate the styles for you. The animation is nice though.
- m_aleksandrova 15y agoThanks, I used http://prefixr.com/ http://prefixr.com/, everything else handcoded:)
- icki 15y ago156kB?
- gue5t 15y agoSave in CPU? Mine was pegged the whole time.
- michael_miller 15y agoWere 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.
- dimarco 15y agoMy CPU barely worked at all. (latest MB Pro).
- PKKid 15y agoI peeked at 5% CPU utilization in Chrome on Win7.
- htilford 15y agoit'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.
- m_aleksandrova 15y agoI 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!
- akkartik 15y agoThe dancing eggs remind me of the dancing muppet chickens: http://www.youtube.com/watch?v=tLdYI8zk4QQ http://www.youtube.com/watch?v=tLdYI8zk4QQ
- m_aleksandrova 15y agoThis gives me more ideas! haha:)
- mjcohenw 15y agoRemember, the Easter Bunny died for your cssins!
- m_aleksandrova 15y agohaha:)
- chrisacky 15y agoIs 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.
- m_aleksandrova 15y agohttp://audiojungle.net/item/playground-fun/408719?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Lmz 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_portfolio&WT.seg_1=item_portfolio&WT.z_author=Concept36 http://audiojungle.net/user/Concept36/portfolio?WT.ac=item_p... has some nice melodies.
- digitalboss 15y agoWorks 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?
- m_aleksandrova 15y agoThe only tool I used is http://prefixr.com/ http://prefixr.com/, everything else handcoded:)
- cifder 15y agocool stuff. worked good on my macbook air
- TazeTSchnitzel 15y agoWhy not a browser-freezing CSS3 "animation"? https://ajf.me/stuff/htmcraft/200blocks https://ajf.me/stuff/htmcraft/200blocks
- haldean 15y agoMy reaction to this was complete awe, which was compounded when I saw the CSS source. Awesome demo!
- m_aleksandrova 15y agoThanks:)
- navs 15y agoWorked great on my iPhone 4 but animation didn't complete on my Samsung tab. Love to see this done with less or sass.