-3

My basic working sample code:

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: all 0.25s ease 0s;
    -moz-transition: all 0.25s ease 0s;
    transition: all 0.25s ease 0s;
}

Demo

If I remove the 0 before transition duration and s after transition delay then it's not working:

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: all .25s ease 0;
    -moz-transition: all .25s ease 0;
    transition: all .25s ease 0;
}

I ask this question because my transition is working with the latter code but suddenly Chrome gave me the error "Unknown property name" and I need to change it to the former version to make my transition working again. How can I resolve this problem since I've a lot of code with the second format.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Vui La Chinh
  • 233
  • 1
  • 8
  • Which property is the `0` supposed to be then? – Mr Lister Jan 23 '16 at 17:03
  • @Mr Lister: transition-delay (the first – BoltClock Jan 23 '16 at 17:03
  • @Mr Lister: The spec tells implementations how to interpret the declaration. It says that the first – BoltClock Jan 23 '16 at 17:06
  • Because it's not valid? What kind of question is this? Running the code through the [CSS validator](http://jigsaw.w3.org/css-validator/) would have given you your answer. – cimmanon Jan 23 '16 at 17:09
  • @cimmanon: I'm going to enjoy linking back to [this comment](http://stackoverflow.com/questions/33198772/after-chromes-latest-update-the-background-css-i-use-no-longer-works#comment54202943_33198772) anytime something like this comes up. – BoltClock Jan 23 '16 at 17:11

2 Answers2

5

CSS never permitted unitless zeroes for time values. Unfortunately you've been relying on what was a bug in Chrome all along. Fortunately it seems they've finally gotten around to fixing it.

The fact that you included other prefixes means you should have found out early on in development that the other prefixes never worked on any other browser due to the unitless zeroes, and that you should never have kept the unitless zero times in the first place.

You will have to update all of your code, because as it is right now it is simply invalid CSS. The lesson here is to test on multiple browsers. Especially if you're going to write the prefixes for them.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
2

Even if all units represent the same time for the value 0, the unit may not be omitted in that case as it isn't a <length>: 0 is invalid and does not represent 0s, 0ms.

//developer.mozilla.org/en-US/docs/Web/CSS/time

Your code was never valid and it never worked in other browsers than Chrome. It looks like they are now respecting the standard. You need to validate your code if you want it to work.

tao
  • 82,996
  • 16
  • 114
  • 150