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

Mozilla

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

Swipe

That the swipe animation didn't work at first try surprised 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 won't accept it. This rule is almost always true for Mozilla.

Opacity

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 searched 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 some none proposed like -moz-border-radius).

Conclusion

Programming Mozilla can be really annoying. 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 trial and error. Still I rather support Moz than Netscape 6 alpha... I mean final.

Demo

NW
N
NE
W
E
SW
S
SE

WebFX

Fade in
Fade out

WebFX

Note: There is currently a bug in Mozilla that makes the swipe move the element after the animation. This happens when there is a border on the element and the bug is that offsetLeft gives the left position of the content (not the element).


Basics of Animations
The Swipe Animation
The Fade Animation
Mozilla Swipe and Fade

Author: Erik Arvidsson