Very impressive CSS3 demo: CSS3 Planetarium
hacks.mozilla.org
hacks.mozilla.org
As for this thread, today I learned that MSIE9 is actually released. Time to get updating :)
I wonder if it's the start of an effect that will eventually be used to carbon-date websites... "Ah look at this specimen - table based layout, and JavaScript littered with variable names beginning with "mm_" from the late Dreamweaver era. Oooh, now look here... completely linear animations... my guess is it's early 2011! And in such condition!"
It looks like all the animatable properties just have ease-in / out timing, and go from A to B. Given that, the best you could do is animate each X/Y direction's behavior, creating a new animation at each bezier curve point, and using the bezier form of the timing function to mimic curved paths.
https://developer.mozilla.org/en/css/css_transitions and https://developer.mozilla.org/en/css/css_transitions
You should be able to get arbitrary bezier paths if you pick your x and y timing beziers carefully, I'd think... But it does take some thinking.
It might be that because they're moving fast that you perceive it that way. But most of the animations have easing. Ease in and out on almost all the animation styles.
We are glad that many of you found our demo interesting. The point was to explore how we could apply some new browser features to present educational content in an interactive/immersive way.
Sorry about Pluto fans – we were also sad not to include it. We should have put it as an easter egg!
Thanks to people who reported typo/content errors.
We cannot fix them right now though – because we have no control over Mozilla's site. We'll push an update when we get the chance.
P.S. I don't know about you guys, but it still bugs me whenever I don't see Pluto.
Nice touch.
That pattern just might catch on.
* http://sass-lang.com/ * http://lesscss.org/ * http://learnboost.github.com/stylus/
The last one is the most promising since it can be made to look exactly like standard css, but it's really rough right now.
Combined with some of the great mixins provided with Compass: http://beta.compass-style.org/reference/compass/css3/transfo..., you can eliminate many of the vendor specific declarations.
@import css3
#transparent {
opacity: 0.6;
}
----
#transparent {
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
}
That's input/output in stylus. This uses an `opacity` mixin defined that's being invoked without the optional parentheses and with the optional colon+semicolon.I have the beginnings of the Compass CSS3 library that's on hold while TJ fixes bugs and adds features to cover edge cases. The eventual goal is the ability to write straight CSS3 and have everything work.
Note, by the way, that right now -moz-transform and -webkit-transform have different syntax, so "consolidation" involves deciding which syntax to standardize on.
Besides, we developed this demo on OSX, where performance is comparable among all three supported browsers.
Though in this case the demo was actually written after Firefox 4 development was frozen. So the fact that it's particularly fast in Firefox on Windows just has to do with hardware acceleration, nothing else.
[EDIT] On iPad 1.
And I think the point of the original poster isn't that we should drop HTML. But rather that this application isn't cool on first principles. You can show this same app to your child as a Flash app and your child should be just as impressed. It's a good work for HTML, but as far as applications distributed by a web server it isn't especially innovative. But we should keep working on HTHML/JS/CSS as it will get better.
the features of html/css/javascript are not impressive, the fact that you can build increasingly complex application that will work on a common runtime installed on every pc and most people tablets and phones without (barely)any packaging or installation procedures is a modern day miracle
This requires me to install a whole browser! For some reason the HN crowd sees installing FF4 as free. Installing a plug-in as nearly the equivalent to jail time, a horrendous chore.
With all due respect to all the excitement in mobile (where Flash is nonexistent), HTML5 fundamentally won't change the desktop at all. And certainly looking at an application that I've seen high school students do in Flash is simply not exciting. I salute HTML for finally getting there, but its just not fundamentally very interesting.
I wasnt being specific to this one page (which works in chrome as well), but at the same time it can be viewed in browsers going back to mosaic with varying degrees of aesthetic.
html has already changed the desktop and it is only going to go further, there are operating systems coming out that have nothing but a browser, most phones these days come with a browser, we are still in the early stages of building the most ubiqitous and usable computing platform that has ever existed, you might not get excited about it, but I do.
That's because that's what it generally has been, in the case of Flash. You may want to read http://blog.zpao.com/post/538816688/how-to-install-flash-on-... if you haven't had that particular "pleasure"...