I've taken some time to add diagonal swipe animation as well as ported both the swipe and the fade to Mozilla.


I just wanted to briefly cover what was done to make these two work in Moz.


That the swipe animation didn't work at first try suprised me. I thought that clip would work exactly the same in both IE and Moz. It didn't! So I went to Bugzilla and found that the bug was fixed (clip didn't work a few months ago). Then my quest continued to the CSS2 specifications at W3C. No luck there. Moz still didn't work. Then I went back to Bugzilla and found out that the specification had an error and finally I got it to work. The syntax for clip should be:

rect(top, left, bottom, right)

Right and bottom should be the distance from the left and upper edges respectively. Notice that you have to specify the unit or otherwise Mozilla wount accept it. This rule is almost always true for Mozilla.


This one was a little bit easier but I had problems with it as well. I knew that Moz had support for opacity because I had used it before but as always it didn't work so I went and serach for "opacity" in the mozilla directory (on my hard drive) and found out that they had renamed it to -moz-opacity. This seems to be the way with all CSS3 proposed properties (as well as som none proposed like -moz-border-radius).


Programming Mozilla can be really anoying. It is full of bugs and there is no good documentation. It reminds me of when I started doing DHTML and I had to resolve to tryal and error. Still I rather support Moz than Netscape 6 alpha... I mean final.




Fade in
Fade out


Basics of Animations
The Swipe Animation
The Fade Animation

Author: Erik Arvidsson