Sunday, June 5, 2011

CSS Animation in Firefox

Mibbu now supports CSS Animations also in Firefox. The only version in which I have tested it is 5.0/Beta, but I think it should works also in Aurora. Feature detection problem I describe last week wasn't the only unexpected behavior during implementing this (BTW, I want to thanks Anonymous guy who corrects my attempt - contact me, I have only your IP & Country you were writing from:), and Paul Irish for deeper explanation of the problem).

Every animation I've created using Mibbu in Firefox animate only once. No matter if I put 'infinite' as a value of AnimationIterationCount. Using MozAnimation shorthand property doesn't want to work. I rewrote everything couple of times in different ways without any result (sometimes it just stop working also on webkit:)). And then I figure out that setting 'none' as 'MozAnimationDelay' instead of 0 (as in the spec!) solves everything. Nice try Mozilla, but it is again 1:0 for me:). I really love everything from Mozilla, Firefox is my main browser, each day I'm working with technologies created there (also in my full time job in GaduGadu), I'm excited in every news like THIS ONE, and I even ran XUL workshop two weeks ago on FalsyValues conference. But sometimes I simply don't understand why they solve something in such a weird way.
I also had to use MozAnimation attribute using brackets notation because Closure Compiler don't understand it and minimized it to the single letter.
So, you can now download Mibbu from my Github account and play with it.

UPDATE
Ok, thanks to Marek Stepien's research done after my post we figured out that putting delay value without the unit ('0' instead of '0s') solves the problem. Probably, when we put single digit without units, Firefox thought that it is -animation-iteration-count (the only property without any units). Marek creates bug report for this here.

14 comments:

  1. Aw, this was a really great post. In theory I'd like to write like this also - taking time and real effort to make a good article... but what can I say... I procrastinate alot and never seem to get something done. Info Smartphone readmore

    ReplyDelete
  2. great article i just love the whole idea and looking forward to hear more from you free keyword research tool

    ReplyDelete
  3. great article man i just love the way you explained everything keep it up free blogger template

    ReplyDelete

  4. Online Review MarketTeaches You The best Seo,Blogging,Make Money Online,Girl Whatsapp Group Join,Mobile Review,Link Building Tips and Tricks For Free


    100+Hot Girl Whatsapp Group Join Link

    Xiaomi Mi Band 4 Features Price and Specification

    ReplyDelete
  5. This is an extremely abundant benefit for everyone ... thank you for providing us with such a variety of data. I am currently a daily reader of your blogs. thank you the most for the fantastic assortment, keep writing.

    DedicatedHosting4u.com

    ReplyDelete