32 ms·
Our solar system - A Webkit Animation using CSS3
- cpr 16y agoIt looks like only Apple has hooked up WebKit animation to an underlying Core Animation-equivalent layer in the OS which uses the GPU for most of the hard work. Not sure if Google is really motivated to do this kind of system-specific work in Chrome beyond the basic port.
- swannodette 16y agoI would argue that they should be. CSS is well understood by designers/programmers and doing animations all in JS is error prone and off course a CPU hog. Hardware acceleration is particularly important when you're talking about devices with underpowered CPUs (Android). On my iPad/iPhone CSS animations outperform JS animations by a ridiculous margin.
- cpr 16y agoJust to clarify, they do have the CSS-based animations, since they're WebKit-based, but they're just not hooked up to an underlying hardware-based implementation.
- nico_h 16y agoWorks smoothly in Safari on a macbook air.
- zengenuity 16y agoAlso on an iPhone 3G. Text is small, but the animation smooth and not slower than on my Macbook.
- Batsu 16y agoI'm not sure I would call it smooth in Chrome on Windows 7, and this is on a gaming PC (more or less). The process was also using 25% CPU, which I believe Process Explorer would report as one full core.
- papertiger 16y agoNot so smooth on Chrome/Ubuntu (on Mac hardware) either. Cool experiment.
- iaskwhy 16y agoNot smooth at all when you scroll. It plays nicely on iPhone 2G but scrolling and zooming make it hang for a while, I even made the animation stop somehow. I'm not sure this is the way to go...
- rauljara 16y agoNeat. Anyone know if there's a good way to do elliptical orbits using CSS3?
- xhuang 16y agoi think you can change the border radius to get different shape out of your element box(top-left, top-right, bottom-left, bottom-right corners). http://www.css3.info/preview/rounded-border/ http://www.css3.info/preview/rounded-border/
- yankeeracer73 16y agoThe processor fan started up on my Macbook Pro 17" just like it does when I use Flash for more than 5 seconds. How ironical. :)
- swannodette 16y agoHuh. I have a new 13" Macbook Pro and my CPU is at 5%-8% in Safari. However Google Chrome does not look like it hardware accelerates CSS animations so it's eating up 90% CPU on this.
- jim-greer 16y agoThis has improved in 10.1, finally.
- jws 16y agoOdd. Desktop iMac, older Core 2 version, it only takes me from my background 2% cpu use to 7% cpu use. Perhaps it is making heavy use of the GPU, which I wouldn't see in the cpu usage stats. (I add: using Safari.)
- sirn 16y agoOddly, it use 100% of one of my i7 iMac core when running on Chrome (6.0.408.1). However, the animation play very smooth with only 1~2% CPU usage when running on Safari (4.0.5 6531.22.7). So I assume you're using Chrome? Edit: -webkit-animation in general seems to be very slow in Chrome. Edit again: Oh right, -webkit-animation is hardware-accelerated in Safari. http://webkit.org/blog/324/css-animation-2/#comment-25071 http://webkit.org/blog/324/css-animation-2/#comment-25071
- hackermom 16y agoOdd. My 2.26ghz 13" MB Pro puts Safari at under 10% CPU usage for this; the CPU doesn't even clock over 1ghz running it.
- X-Istence 16y agoWorks well on my MacBook Pro 2.4 Ghz, Safari went from 0.0 %CPU used to 10.0 used, not bad. Flash tends use much more than that.
- hackermom 16y agoDoes anyone know what the belt of "scraps" between Mars and Jupiter is? Is there another "Kuiper belt" of sorts sitting right outside Mars?
- mapleoin 16y agoyup: http://en.wikipedia.org/wiki/Solar_System#Asteroid_belt http://en.wikipedia.org/wiki/Solar_System#Asteroid_belt
- BoppreH 16y agoChrome eats CPU like there's no tomorrow and the frame rate is around 15. Firefox doesn't even animate it. Seriously, what is the point of this demos? It's like that Star Wars movie in ASCII. Interesting, but not very useful.
- hackermom 16y agoPerhaps a good spurring for everyone else than Apple to pick up pace and get with implementing specifications for their browsers.
- BoppreH 16y agoI wasn't referring to the implementations, but this new wave of CSS3/HTML5 demos doing nothing that could solve a real-world problem. Sure, I'd like all browsers to have a correct implementation of this technologies, I'm just questioning this type of demo. In the end they are just a fancy ACID-like test and frankly, we already have more than enough for this use.
- icefox 16y agoAs cool as this is Neptune and Pluto orbits are wrong. They cross each others paths.
- ugh 16y agoThey should have just left out Pluto altogether. It’s not a planet. They could have put in the Kupier belt like they put in the asteroid belt.
- joblessjunkie 16y ago-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; Really? Is this what we have to look forward to in CSS for the coming decade?
- daleharvey 16y agono, they will just be dropped when there is a standard syntax
- joblessjunkie 16y agoBut old browsers are forever.... witness IE6
- daleharvey 16y agoby the time the lagards implement it, it will be standardised, ie doesnt require a prefix now that its finally implementing it.
- devinj 16y agoOnly old IE is forever. Chrome autoupdates very fast, Firefox a bit less so. I don't remember about Safari but I think they upgrade fast too.
- alabut 16y agoThis is a great demonstration of why to use CSS3 animations - Flash doesn't support the concept of graceful degradation. This page turns into a static image in Firefox/Mac instead of borking out with a blue lego piece.
- Mgreen 16y agoI really appreciate the effort that has gone into building the demo. But i disagree with you.It is extremely easy for developers to provide fallback content when Flash is not availble. As a developer, here is why i(personally) wont choose CSS3 animations for building similar content anytime in the near future: -Works only on webkit browsers -Performance is really bad on Chrome. Compared to most of the heavy weight flash content out there, this is just a very basic animation.
- alabut 16y ago"It is extremely easy for developers to provide fallback content when Flash is not availble." Really? How? I was an actionscripter for years before I dropped Flash from my arsenal and worked at a game company that would've loved to provide their games on systems without Flash.
- jheriko 16y agoIts interesting, just a shame it works for nobody... er webkit users only and even then it looks glitchy (I used Chrome).
- fredoliveira 16y agogive it a try in safari. I think you'll be amazed.
- mturmon 16y agoHere's a static picture of the same thing, but much more accurate and inclusive: http://ssd.jpl.nasa.gov/?orbits http://ssd.jpl.nasa.gov/?orbits e.g., http://ssd.jpl.nasa.gov/?ss_inner http://ssd.jpl.nasa.gov/?ss_inner http://ssd.jpl.nasa.gov/?ss_distant http://ssd.jpl.nasa.gov/?ss_distant