

Our solar system - A Webkit Animation using CSS3 - nico_h
http://neography.com/experiment/circles/solarsystem/

======
joblessjunkie

        -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
no, they will just be dropped when there is a standard syntax

~~~
joblessjunkie
But old browsers are forever.... witness IE6

~~~
devinj
Only 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.

------
mturmon
Here's a static picture of the same thing, but much more accurate and
inclusive:

<http://ssd.jpl.nasa.gov/?orbits>

e.g.,

<http://ssd.jpl.nasa.gov/?ss_inner>

<http://ssd.jpl.nasa.gov/?ss_distant>

------
yankeeracer73
The processor fan started up on my Macbook Pro 17" just like it does when I
use Flash for more than 5 seconds. How ironical. :)

~~~
sirn
Oddly, 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>

------
cpr
It 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
I 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
Just 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.

------
BoppreH
Chrome 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
Perhaps a good spurring for everyone else than Apple to pick up pace and get
with implementing specifications for their browsers.

~~~
BoppreH
I 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
As cool as this is Neptune and Pluto orbits are wrong. They cross each others
paths.

~~~
ugh
They 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.

------
alabut
This 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
I 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
" _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.

------
X-Istence
Works 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.

------
jheriko
Its interesting, just a shame it works for nobody... er webkit users only and
even then it looks glitchy (I used Chrome).

~~~
fredoliveira
give it a try in safari. I think you'll be amazed.

------
nico_h
Works smoothly in Safari on a macbook air.

~~~
Batsu
I'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.

~~~
iaskwhy
Not 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
Neat. Anyone know if there's a good way to do elliptical orbits using CSS3?

~~~
xhuang
i 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/>

------
hackermom
Does anyone know what the belt of "scraps" between Mars and Jupiter is? Is
there another "Kuiper belt" of sorts sitting right outside Mars?

~~~
mapleoin
yup: <http://en.wikipedia.org/wiki/Solar_System#Asteroid_belt>

