Comments on: CSS Animation

By: ahrjay

ahrjay — Thu, 04 Jun 2009 06:20:41 +0000

Here’s a potential issue, say you have a a title that when hovered over reveals a paragraph below it by using the -webkit-transition: height 1s linear; inital height is 0 and the hover height is 100%; instead of revealing the paragraph over a 1 second period, it shows it straight away with no transition from 0 – 100%? If I set the hover height to 100px it works as expected and slowly reveals the paragraph of transition time? Is this the correct behaviour?

By: kubenstein

kubenstein — Fri, 20 Mar 2009 16:38:12 +0000

hi,
i this is not exactly animation but i thing this post is the best.

I made 3d music box from elfen lied anime.

only beta but try it

http://users.pjwstk.edu.pl/~s6052/jap/elfenLied.html

By: rpflo

rpflo — Mon, 16 Mar 2009 02:33:37 +0000

People, people, people. To those of you saying “can I disable this!” and “why would you do that?”…

Some developers may party like it’s 1995 and put garbage in front of you, but real interface designers understand that animation can be an integral part of an application’s interface and usability.

Quit thinking blinking banners on dailypuppy.com and start thinking applications. Sliding modal boxes instead of nasty popups, images that grow from thumbnail to full image like Preview when clicked, drag and drop “release” behavior, flippy triangles for hierarchical navigation, slide transitions in image galleries, hiding menus and optional content (hit command + shift + | (pipe) and watch it animate, much better than just disappearing).

Animation helps users know what happened, instead of stuff just disappearing and having the content skip around, or popups increasing their blood pressure. Stuff in the real world doesn’t pop-up (except burglars, and killers), stuff animates.

I’ve got an app that uses a datagrid that has a form that slides up from the action bar to add or edit records and users love it.

By: druchtie

druchtie — Mon, 02 Mar 2009 08:35:28 +0000

Nice work! Finally I can build nasty things like my flash friends of zombo.com! Check out http://simpel.us zombo.com rebuild for Webkit (safari 4) using CSS -gradients, -roundcorners, -fonts, -animation and HTML5.

The docs: http://dannyruchtie.nl/?p=62

cheers Danny

By: TD912

TD912 — Sat, 28 Feb 2009 03:23:16 +0000

Nice work! I see you used this stuff in the Safari 4 intro ‘video’.

http://www.apple.com/safari/welcome/

By: Zneak

Zneak — Sat, 21 Feb 2009 20:09:46 +0000

@lensco: Wrong. ECMAscript is fully supported in SVG files, so are DOM manipulations.

CSS animations sure are cool, but you could achieve a smiliar result with JavaScript, and using only standart interfaces supported in pretty much every used browser. I think standarts that aren’t implemented in WebKit yet, like MathML and APNG, should be prioritized over proprietary CSS extensions.

By: thijsjacobs

thijsjacobs — Mon, 16 Feb 2009 01:54:10 +0000

If I were to use the Webkit proposed spec (for testing of the CSS spec), I run into problems when preparing the code for full implementation of the final spec.

For example:
@-webkit-keyframes pulse, @keyframes pulse {}

This completely prevents the animation from rendering.

By: benjibuls

benjibuls — Fri, 13 Feb 2009 05:02:14 +0000

Fantastic additions. Have been playing with the gradients, shadows and the likes. Can’t wait for support to get wider, will have to add the animation elements to my examples. Current examples: http://lowbitrate.net/CSS3/

By: lensco

lensco — Thu, 12 Feb 2009 16:59:25 +0000

To the people clamoring for supporting SVG animation: as far as I know, there is no way to manipulate existing DOM elements from within SVG, right? That’s the beauty of this approach.

We can make all kinds of fancy, bloated animations and such – as we can with SVG – but where this feature will really shine is subtle effects that manipulate existing elements of a web interface.

By: some1

some1 — Thu, 12 Feb 2009 08:33:32 +0000

Hey Apple Safari/WebKit team, please add XForms, MathML and APNG support to WebKit soon.