Css3 animation does not work when triggerd by backing bean method

Question

Hi,
I use Jdev 11.1.1.4 (but I guess the Jdev/ADF version does not matter in this case) and Firefox 15.0.1.
I tested some parts of article https://blogs.oracle.com/groundside/entry/css_animations_the_panel_flip from Duncan Mills.
The CSS3 animation for styleClass "rotateOut" works fine when I trigger it from mouse hover.
The problem is that the animation does not work when I set the styleclass in a backing bean.
In this case the UI component to rotate (in my case the calender component) changes immediatelly to the transition target without the transition-duration of 2 seconds and therefor there is no animation effect visible for the user.
Here the backing bean code:
    public void doRotate() {
       afCalender.setStyleClass("rotateOut");
       AdfFacesContext.getCurrentInstance().addPartialTarget(getAfCalender());
    }Here the skin:
  .rotateOut {
    -moz-transition-property: -moz-transform;
    -moz-transition-delay: 2s;
    -moz-transform: rotateY(45deg);
    -moz-transition-timing-function: ease-in-out;
    -moz-transition-duration: 2s;
  .rotateReturn {
    -moz-transition-property: -moz-transform;
    -moz-transform: rotateY(0deg);
    -moz-transition-timing-function: ease-in-out;
    -moz-transition-duration: 2s;
  }In Duncan's article java script is used to change the style class.
Does the CSS3 animation only work when java script is used to change the style class or shoud java in a backing bean also work?
Any hints?
regards
Peter

Answer 1

I have tested several other settings but no success.
Any ideas?
regards
Peter