CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash?

[MacRumors]

The Webkit blog reports that the latest WebKit builds now support explicit animations in CSS.

CSS Animations is one of the enhancements to CSS proposed by the WebKit project that we’ve been calling CSS Effects (eg. gradients, masks, transitions). The goal is to provide properties that allow Web developers to create graphically rich content. In many cases animations are presentational, and therefore belong in the styling system. This allows developers to write declarative rules for animations, replacing lots of hard-to-maintain animation code in JavaScript.

The features are presently unique to WebKit but can be viewed by using one of the beta nightly builds or simply through your iPhone/iPod Touch. Apple has already implemented these animations, as well as 3D support, within the iPhone's mobile Safari.

Those browsing using an iPhone or a nightly Webkit build can see the sample pages in action: falling leaves (pictured), bouncing box, and pulse ("the new blink").

These features should eventually make their way into Mac OS X's Safari builds and the features have also been proposed for inclusion into the actual CSS standard. As we've previously detailed, Apple has been making efforts to push web-standard technologies possibly as a way to reduce dependance on Adobe's Flash player. The incorporation of animation into CSS could certainly threaten one of the major uses of Flash on the internet. Apple has also been investing in other core web technologies as the basis for their Mobile Me web applications.



Article Link: CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash?

[garybUK]

Am I missing something here but what about video? that still leaves another HUGE chunk of uses for flash. Plus if IE doesn't implement this a lot of developers won't take it into account so it will negate the point. That's why Flash is so big it solves problems with browser's poor standards.

[arn]

Originally Posted by garybUK

Am I missing something here but what about video? that still leaves another HUGE chunk of uses for flash. Plus if IE doesn't implement this a lot of developers won't take it into account so it will negate the point. That's why Flash is so big it solves problems with browser's poor standards.

You mean this?

http://webkit.org/blog/140/html5-media-support/

Another nice feature from the HTML5 draft specification is now available in the WebKit nightly builds for Mac OS X. The new HTML5 <video> and <audio> elements add native support for embedding video and audio content in web pages.

[JackAxe]

Originally Posted by arn

You mean this?

http://webkit.org/blog/140/html5-media-support/

Ouch, the tiny video on the page is a CPU hog.

[maharajah]

Originally Posted by JackAxe

Ouch, the tiny video on the page is a CPU hog.

That video is about 10-13% on my Mac Pro, an equivalent flash video is about 7-10%. Hopefully it be cut in half before release.

[JackAxe]

Originally Posted by maharajah

That video is about 10-13% on my Mac Pro, an equivalent flash video is about 7-10%. Hopefully it be cut in half before release.

I'm running an older MacBookPro 17" 2.33, so it's not as efficient as the newer Intels. It eats up 80 - 85% CPU. I tried it on my PC, which is a 45nm Quad and it uses 2 - 3% CPU.

Even if they cut it in half, it only works in Safari right now, so it has a long ways to go.

[inkswamp]

Originally Posted by garybUK

Am I missing something here but what about video? that still leaves another HUGE chunk of uses for flash.

Riiiiight. Because prior to Flash, there was no way to stream video on the Web.

[NeoMayhem]

Originally Posted by garybUK

Am I missing something here but what about video? that still leaves another HUGE chunk of uses for flash. Plus if IE doesn't implement this a lot of developers won't take it into account so it will negate the point. That's why Flash is so big it solves problems with browser's poor standards.

You can already watch flash video from pretty much any website if you jailbreak.

[Trajectory]

I am not a big fan of sites that only use Flash, so, the CSS animation sounds very interesting. BUT, this will only become a good alternative to Flash if EVERY browser rendered CSS the exact same way, because right now, it's a total pain to create CSS for sites that work on all major browsers. Just look at IE, it has never rendered CSS properly simply because MS refuses to follow the same CSS Box Model that all other browsers adhere to (because it is the standard). Then you have Safari and Firefox which do things differently as well, although MSIE is the worst offender.

I can't imagine how miserable it would be to extend the current CSS rendering mess to animation and interface design. For that reason alone, I hate to admit that Flash provides a standard platform that helps to greatly reduce development time because you don't have to spend hours and hours just fine-tuning one CSS element to look alike in 6 different browsers.

However, developers who create sites that use ONLY Flash and provide no alternative for those who have it turned off should not be in the business of building websites for any commercial venture.

[kurosov]

Originally Posted by Trajectory

this will only become a good alternative to Flash if EVERY browser rendered CSS the exact same way

The main issue here is with IE. It is a bad browser that has always been the last to adopt new standards (see 32bit png transparency). Because of this designers have had to skip using new techniques most of the time because the most common browser does not render them correctly.

Because IE is the noly browser installed on a windows machine from the start a large number of users do not even know alternatives exist, meaning IE's terrible update schedule controls the web design industry.

This is why you see more personal sites turning to a no IE compatability test mode combined with a "designed for use with firefox" or whatnot banner these days. Unfortunatly a professional cannot use this route because their customers want maximum exposure.

If microsoft would pay more attention to the direction the industry is taking and plan ahead with IE developments then this problem would be no where near as bad. Personally i think it is time they decided to cut their losses and scrap IE then bundle a variety of browsers in the windows7 install for the user to choose from.

[Mal]

Great. Another feature that will be only implemented in some browsers and differently in all that do. Also, I have a feeling we're all going to be really sick of those animations in just a few months after they start being used commonly. (I'm already getting sick of the pulse animation, or is it just making me sick?)

jW

[kastenbrust]

so rather than fix flash lets add something else to the mix....great.

[stokessd]

Hopefully something like adblock will be able to turn this off too. Call me old, but I don't want my web experience to be like a movie with all sorts of transitions and such, I want it to be like a book. A book with limitless pages, but a book.

Plus this does nothing to change the millions of Flash sites out there that I currently can't see on my phone.

Get off my lawn,
Sheldon

[koobcamuk]

Originally Posted by stokessd

Hopefully something like adblock will be able to turn this off too. Call me old, but I don't want my web experience to be like a movie with all sorts of transitions and such, I want it to be like a book. A book with limitless pages, but a book.

Plus this does nothing to change the millions of Flash sites out there that I currently can't see on my phone.

Get off my lawn,
Sheldon

Do you browse using dialup? You should. Or, you could turn off images in safari for the "book-look".

[andiwm2003]

this is very good. it means that either flash gets much better, leaner, reliable or it dissappears. and with 20 million iphones/ipods supporting it already many will support this standard soon. and since it's in the css standard there will soon be a way to switch it off yet you will still be able to read the text unlike with flash.

i wonder if that also will hurt quicktime player....

[aafuss1]

It's a very good alternative to supporting Flash-CSS is better and would work extremely well.

Though, on the other hand, I could not forsee big, major sites that rely on Flash to create a version that could use CSS and be viewable on the iPhone

[Xian Zhu Xuande]

Flash is not well-loved in the web design community. And there are many people who disable it specifically because it slows things down and is used primarily for advertisement. It is also controlled by a single company, which isn't cool for our go-to animation solution. It badly needs to be replaced and some gears are already slowly propelling us in that direction.

Originally Posted by andiwm2003

this is very good. it means that either flash gets much better, leaner, reliable or it dissappears. and with 20 million iphones/ipods supporting it already many will support this standard soon. and since it's in the css standard there will soon be a way to switch it off yet you will still be able to read the text unlike with flash.

You'll only see things like this, for quite some time, in applications specifically made to be viewed on Apple computers or on the iPhone. This stuff isn't really going to creep into general web use until it is standardized, web designers know they can degrade it gracefully to old browsers, and until they've got a cross-platform benefit (perhaps Safari/Firefox) to consider it. Internet Explorer probably won't come around to supporting these things for a very long time.

And the HTML 5 video tag won't be used until they can find a way to display video properly in older browsers, or until it has been supported by all current browsers for quite some time. Object embedding is a mess right now even without the introduction of new solutions—but a standard simple solution really would be nice to have around.

[wheezy]

*Sigh* If only M$ would jump on the technology wagon instead of being the trailer that the wagon has to kick and scream to pull along.

CSS3, HTML5 is gonna be great, the developers are taking their time to make sure they deliver a very solid future for the internet. Unfortunately, IE is still going to be the popular limited piece of crap that the majority of users are going to use. I wish M$ would just put Gecko or WebKit into IE as the rendering engine and then force an update. Why we're still fettered by IE6 is just beyond me...

[InkMaster]

Originally Posted by wheezy

*Sigh* If only M$ would jump on the technology wagon instead of being the trailer that the wagon has to kick and scream to pull along.

I think its more like Microsoft being the "special" kid in the classroom and the standards for everyone are being lowered just so he doesn't feel as bad about himself.

CSS3, HTML5 is gonna be great, the developers are taking their time to make sure they deliver a very solid future for the internet. Unfortunately, IE is still going to be the popular limited piece of crap that the majority of users are going to use.

And for that simple reason all these great new features of HTML5/CSS3 etc are completely useless if you want a unified browser experience across all browsers - because you will always be stuck with the LCD which is, and has always been IE.

I wish M$ would just put Gecko or WebKit into IE as the rendering engine and then force an update. Why we're still fettered by IE6 is just beyond me...

I wish Microsoft would either put out a browser which #$@%ing works or would please stop #@$%ing trying. IE8 is already on RC2 and its ****** "standards compliant" mode is more broken then IE6s pos default mode.

Right now when I do any sort of coding its always 1 copy of the website for every single browser out there - Safari, Opera, Chrome, Firefox, Camino, Omniweb and whatever else I'm missing. And then I have to do a "special" version for IE7. And a "special" version for IE6. And I have a feeling that once pos IE8 comes out, the amount of work I'll have to do will increase as I'll have to make a "special" version for IE8 also.

Why the @$#% can I make something which works in every single browser from every single company. Yet then I have to do 3x more work just so my work which is 100% standards compliant, is compliant with a non standards compliant pos.

The ONLY reason why IE6 and IE in general are still so popular is - to be blunt about it - dumbass users to whom "the internet" is "the blue e on the desktop". Who don't even understand the concept of what a browser is. Who just buy whatever is in Wal-Mart that day and then click the "remind me later" button, every 5 minutes, for the next 6-7 years on the 2003 Norton Anti Virus trial that they got.

I can't even express how I wish I could kill any support I offer for IE. But with that pos having so much market share.... sigh... hard to do....

[SpinThis!]

Originally Posted by wheezy

I wish M$ would just put Gecko or WebKit into IE as the rendering engine and then force an update. Why we're still fettered by IE6 is just beyond me...

IE6? My logs show a few folks who are still on 5.5 or even 5. While I stopped caring about these people since IE7 came out, IE6 is still hanging in there. There's a few rendering bugs you have to work around but c'mon... it's not the hell some people make it out to be.

You know MS people—they want to do their own thing. Microsoft would never adopt WebKit or Gecko... but I think Opera might be a good fit for them. MS is too proud to beg or ask for help. Have you seen the MSDN blog? What a bunch of zealots who cling to their VBScript and conditional tags for older browsers.

It's too bad Microsoft tow the corporate line and break just enough of the standard so companies who are tied into their products refuse to upgrade. Even IT guys I know refuse to upgrade to IE 7 because it's not been tested enough or it's huge hassle to roll it out to the hundreds of desktops they need to support (or are just plain lazy). That's certainly not helping the problem.

[min_t]

Originally Posted by wheezy

*Sigh* If only M$ would jump on the technology wagon instead of being the trailer that the wagon has to kick and scream to pull along.

CSS3, HTML5 is gonna be great, the developers are taking their time to make sure they deliver a very solid future for the internet. Unfortunately, IE is still going to be the popular limited piece of crap that the majority of users are going to use. I wish M$ would just put Gecko or WebKit into IE as the rendering engine and then force an update. Why we're still fettered by IE6 is just beyond me...

Quit making too much sense. Making the webworld a better place vs ruling the webwold are 2 different beasts. We'll have to wait for Frodo to destroy the ring before the king takes his throne.

[sishaw]

falling leaves on my iPhone--pretty cool! Definitely effective. Doesn't seem to affect the overall speed one way or the other.

[7egend]

Flash is a thing of the past, people who have disabilities like to be able to view websites and websites composed entirely of flash are nearly impossible for them to navigate. By using CSS it allows them to view the site, and have descriptions of what is going on through their text reader etc.

Not to mention with bandwidth caps becoming rampant, I think we will see flash fade away and CSS will provided for a cleaner and better user experience in the long run.

[Darkroom]

Originally Posted by 7egend

Flash is a thing of the past, people who have disabilities like to be able to view websites and websites composed entirely of flash are nearly impossible for them to navigate. By using CSS it allows them to view the site, and have descriptions of what is going on through their text reader etc.

Not to mention with bandwidth caps becoming rampant, I think we will see flash fade away and CSS will provided for a cleaner and better user experience in the long run.

you couldn't possible be more wrong...

treat yourself to some education and google "SWFAddress", and you might want to also google "SWFObject" before you consider another false argument like "flash site's have an inherent disability to be crawled by search bots"...

CSS animation is suitable for fading and scrolling, the end... everything else is jagged and ugly.

finally, you can get a whole lot of complex animation out of a .swf that has very little load time (under 200k), and that's without compression...

[Cromulent]

Originally Posted by Darkroom

you couldn't possible be more wrong...

treat yourself to some education and google "SWFAddress", and you might want to also google "SWFObject" before you consider another false argument like "flash site's have an inherent disability to be crawled by search bots"...

God knows what you are talking about, but the person you quoted was talking about people who are disabled finding it hard to navigate flash sites.