Only Firefox honours !important in CSS animations

A recent inconsistency I came across while working with 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.


Recent posts View all

Ruby

Iterate over indexed params in Rails

When your API isn't Rails-shaped, sometimes you need to handle input differently

Web Dev Jekyll

Running Jekyll from inside VS Code

How to set up your VS Code to run Jekyll without needing extra extensions