X

Technical Articles relating to Oracle Development Tools and Frameworks

Experiments with CSS animations in ADF Applications - Introduction

Duncan Mills
Architect

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 11.1.2.1, 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:

  1. Simple animated zoom on the Pick Me! button. It grows and then shrinks as the mouse moves over and out.
  2. Panel slide-out effect with shadow for the "menu" panel.
  3. 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)

Join the discussion

Comments ( 3 )
  • guest Friday, February 17, 2012

    It's really cool. Thanks for educating us with new features/capabilities by exploring new ideas. Thanks a lot :)


  • guest Wednesday, March 7, 2012

    Hi Duncan,

    Nice examples. Do you think that these animations based on CSS would work on iOS or Droid?

    Thanks,

    Ken


  • Duncan Wednesday, March 7, 2012

    Certainly on iOS as they stand as Safari is a WebKit browser as well


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.