Only Firefox honours !important in CSS animations

I came across an inconsistency recently when working with animations in CSS. If I have a property that is marked as !important browsers will ignore this when it comes to animation and animate anyway whereas Firefox will not animate any property that has been set to be important.

Questions

I think the first thing that this highlights is that using !important is a bad idea (there are loads of reasons why !important can really screw your day up, this is just one of them!)

The second thing is it begs the question, are Firefox doing it right or wrong? Maybe there is a reason why all other browsers handle this differently?

I think Firefox is doing it right in this instance, when you add !important to something you are effectively saying - I don’t care about anything else, this element needs to have this property applied to it for now and forever.

The ‘Fix’

I use the term Fix loosely because I am not convinced anything is broken, but there are two ways to make Firefox act like the other browsers;

1. Don’t use !important in your markup (this is my preferred option)
2. Use !important in your keyframes block

The Code

The code I used to generate the demo can be found as a gist.