My blog has been moved to ariya.ofilabs.com.

Wednesday, October 27, 2010

Look ma, no JavaScript!

Take a look at the following CSS 3 demo. No Flash. No JavaScript. No image.

Hungry for more? Enjoy some other demos created using Sencha Animator.

19 comments:

viesturz said...

Too bad it does not work with Firefox 4 beta.

Anonymous said...

KHTML crashes, kdewebkit can do it

Anonymous said...

Doesn't work with Firefox 3.6.11 on Windows XP.

johndrinkwater said...

It’s CSS3 once you drop the vendor prefixes, as of now it’s just a cute webkit toy.
Please, everyone, stop calling things CSS3 when they aren’t.

Alessandro Portale said...
This comment has been removed by the author.
Alessandro Portale said...

Wow, the animation rocks on my (fairly recent) G. Chrome. This here is actually the moment where I finally start to believe in complex CSS based animations. Sencha Animator looks like a game changer.
Bonus points for it being Qt based! :)

Ariya Hidayat said...

Once future version of Firefox 4 supportd keyframe animation, it'll work there!

Anonymous said...

Works only on Webkit.

Benoit Jacob said...

To be fair, CSS keyframe animation is a webkit proposal. Is it implemented anywhere else than in webkit?

There's a ticket at mozilla but I have no idea if there's activity on it:
https://bugzilla.mozilla.org/show_bug.cgi?id=435442

Anonymous said...

Lol it is not CSS3. It is webkit extension for css, it is not CSS3. .
Now i know why people doesn't know what web standards are. LOL

Ariya Hidayat said...

It's not CSS3 NOW but it will be in the NEAR FUTURE.

Anonymous said...

Until it's approved as a standard and implemented in web browsers will take 2 years.

One year for it to be approved, if all goes well, and another year for anew generation of browsers to adopted it (again if all goes well).

Pretending that this is part of CSS3 standard is disingenuous and is no different, by webkit people, than what Microsoft did in old days with Internet Explorer, creating something unique to them and calling it a standard!

Ariya Hidayat said...

For some references, see also http://www.w3.org/TR/css3-transitions/ and http://www.w3.org/TR/css3-animations/

Ariya Hidayat said...

For Mozilla notes on CSS transitions, see https://developer.mozilla.org/en/CSS/CSS_transitions.

For Opera notes on CSS transitions, see http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/.

Anonymous said...

Once again: hooray for destroying web.

Style-element inside div.
CSS full of prefixed s**t.
CSS not using non-prefixed s**t.
Claiming that this particular prefixed s**t is CSS3...

Honestly, who in their right mind would use Sencha if all it can produce is this kind of s**t?

And also, this blog post with that markup and "CSS3" hype isn't really confidence booster when it comes to Sencha...

Ariya Hidayat said...

Thank you guys for the feedback! And please, no need to masquerade your positive excitement in such a hateful tone :)

While Animator and its auto-generated output are far from (your standard of) perfection, rest assured we'll improve it as it marches towards the official release.

I hope you'll revisit and retry again in the near future.

Meanwhile, feel free to roam the web and post similar positive-excitement-cloaked-in-hateful-tone opinions everywhere!

No'am Rosenthal said...

Great work Ariya!
And to people who like to s**t on other people's work: who in the right mind would listen to anonymous comments anyway?

Standards without pushing the limits is boring.

IAnjo said...

Ok it's not standard yet, but it is documented and is being submitted as a standard, I see nothing wrong with that.

Note also that Sencha is targetting smartphones, and most of those (symbian, android, that other one) are webkit-based.

Nice demo, btw!

Anonymous said...

nice =)