PDA

View Full Version : CSS3 animations



mitchellsimoens
16 Jun 2010, 12:48 PM
Nothing special here, just some CSS3 transforms/animations but wrapped into ExtJS code. This has been committed to the Ext.Fx project on Google code aswell. Thanks VinylFox!

There are 5 animations:

Ext.Fx.CSS3FadeIn
Ext.Fx.CSS3FadeOut
Ext.Fx.CSS3Spin
Ext.Fx.CSS3ZoomIn
Ext.Fx.CSS3ZoomOut


Pretty self explanatory. To view these, you must have Chrome or Safari as it uses WebKit stuff.

Demo: http://www.simoens.org/projects/CSS3/
Google Code: http://code.google.com/p/ext-fx/
License: MIT (http://www.opensource.org/licenses/mit-license.php)

VinylFox
20 Jun 2010, 4:02 AM
Also mirrored on Github for you git geeks.

http://github.com/VinylFox/Ext.Fx

wemerson.januario
20 Jun 2010, 4:17 PM
Thanks for sharing!

mitchellsimoens
21 Jun 2010, 9:02 AM
I have done some work on the code for Fade and Zoom effects. Also updated the demo page so take a look!

http://www.simoens.org/projects/CSS3/

mitchellsimoens
25 Jun 2010, 6:49 PM
Here is another demo. Idea was from Jay Garcia but my execution. Have had many great comments on this one:

http://www.simoens.org/projects/CSS3/panel-demo.html

jay@moduscreate.com
27 Jun 2010, 10:46 AM
mitch, you show off!!

Great work to all contributors.

I hope to use those soon :)

mitchellsimoens
29 Jun 2010, 8:34 AM
Here's to showing off!!!!!!!! =D> :D

Added new animation: Slide

Have two demos for you to play with:

Panel Demo (border layout):
http://www.simoens.org/projects/CSS3/panel-demo.html

Grid Demo (animation on beforeload and load):
http://www.simoens.org/projects/CSS3/grid-demo.html