Thoughts on CSS transitions in Firefox
This post was originally made on the Assanka blog. Assanka was acquired by the Financial Times in January 2012, and became what is now FT Labs. Learn more.
The logic for implementing native animations in the browser is a no-brainer, particularly if you try and use a site that implements scrolling tickers by incrementing an element’s
With animation increasingly important to creating rich and usable user interfaces, the chance to start optimising the performance of animation in the browser via native implementation is a great step forward. Unfortunately, this is currently only supported by Webkit based browsers. In developing the ticker, I wanted to see if support in Firefox would be possible.
From version 1.9.3 of Gecko, the
-moz-transition family of CSS properties have been added, so I tried grabbing the latest version of Minefield (the pre-release codename for Firefox) and running the ticker plugin.
It doesn’t work. Specifically, it doesn’t work for these reasons:
- It doesn’t seem to be possible to act on position properties.
bottomdo not appear to animate. It might be possible to work around this by switching to animating margins rather than absolute positioning, but hopefully it will be possible to animate these before the Firefox 3.7 release.
- It doesn’t appear to fire the
mozTransitionEndevent, which you’d expect from a full implementation of the standard. As a result, my ticker can’t loop.
This is clearly an early pre-release version, and it’s encouraging to see support starting to emerge from the Firefox camp. I think I might have retired by the time this kind of feature hits Internet Explorer!