Experiments with CSS animations in ADF Applications - Introduction
By Duncan Mills on Feb 17, 2012
We have had several ADF users experimenting with JQuery to achieve animation effects and that made me wonder how feasible it would be to work with pure CSS3 animations within the context of an ADF application. From the point of view of the product, we're thinking about how we might express a broader range of animations in a declaritive way, but for now I wanted to see what was possible with the product as it stands. To wet your appetite, here's a short video of my initial prototype. I'll explain all of the effects in follow up articles - so be patient with me and, of course, keep coming back to the blog for more!
This prototype was written in 184.108.40.206, but there is nothing there that would not work in 11.1.1.n. Also I've only worked with WebKit browsers (Chrome / Safari so far), this is still an area where the different browser families need different treatment. This will be an exercise for you the reader.
If you have an up to date version of Chrome, Safari or IE9 you can play the following short video in-line, Firefox users, sorry I had problems with encoding to ogg format, you'll have to download:
If not download it from here (Size: 374k)
I've used three sets of animations here:
- Simple animated zoom on the Pick Me! button. It grows and then shrinks as the mouse moves over and out.
- Panel slide-out effect with shadow for the "menu" panel.
- Panel flip effect where the panel rotates through 180 degrees to show some different content, the kind of effect you'll see on your phone fairly often. (I'll admit that this one is very cool)