Why is this css "transition" value an "invalid property value"

Question

I have the following CSS (and identical prefixed versions):

transition: -webkit-box-shadow 0.4s ease-out,
            box-shadow         0.4s ease-out,
            -webkit-transform  0.4s ease-out,
            transform          0.4s ease-out,
            opacity            0.4s ease-out,
            -webkit-opacity    0.4s ease-out;

about which Chrome gives me this nonsense:

enter image description here

Hovering over the warning sign brings up a tooltip: "invalid property value".

I fail to see the difference to this (from CSS-Tricks):

You may comma separate value sets to do different transitions on different properties:
div {
    transition: background 0.2s ease,
                padding 0.8s linear;
}

Note that I cannot use all, because I am setting .style properties in JS which I don't want animated (unless there is a way to exclude top and left from the transition and still use all, which would be nice!).

How can I get my transition working again? Any advice appreciated.

Edit: Removing the prefixed ones didn't fix it, still an "Invalid property value" on transition and its prefixed forms.

Edit 2: I'm thoroughly confused. I've simplified it to this still-invalid code:

-webkit-transition: transform 0.4s ease-out, opacity 0.4s ease-out;
transition: transform 0.4s ease-out, opacity 0.4s ease-out;

Edit 3: Turns out the solution was just to update Chrome! I'd still like a workaround if possible.

My guess is that doesn't like the prefixes. You could try `transition: all .4s ease-out, top 0s, left 0s;` — Zach Saucier, Oct 18 '14 at 21:49
@ZachSaucier Unfortunately top and left are still animated with this. Same happens if I put top and left before transition. — JJJollyjim, Oct 19 '14 at 00:42

score 3 · Accepted Answer · answered Oct 18 '14 at 22:08

3

It's not an invalid value property.

The spec says

If one of the identifiers listed is not a recognized property name or is not an animatable property, the implementation must still start transitions on the animatable properties in the list using the duration, delay, and timing function at their respective indices in the lists for ‘transition-duration’, ‘transition-delay’, and ‘transition-timing-function’. In other words, unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.

So even if you use vendor prefixes, it will still work.

answered Oct 18 '14 at 22:08

Oriol

274,082
63
437
513

16

I'm not sure why this is an answer and not a comment. Chrome is telling me it is an `invalid value property`, that's not just my opinion. – JJJollyjim Oct 19 '14 at 00:43
1

@JJ56 It's a bug. The [spec](http://dev.w3.org/csswg/css-transitions/#single-transition-property), the [validator](http://jigsaw.w3.org/css-validator/) and Firefox's developer tools say it's a valid value. – Oriol Oct 19 '14 at 01:09

score 0 · Answer 2 · edited Dec 22 '16 at 03:05

0

I hope this will be useful:

.className {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
}

edited Dec 22 '16 at 03:05

James Jones

3,850
5
25
44

answered Apr 19 '15 at 16:36

rasha-saeed

51
6

4

You should put the unprefixed property last, the prefixed ones first. See http://stackoverflow.com/questions/7080605/ordering-of-vendor-specific-css-declarations – Herr_Schwabullek Apr 22 '15 at 08:19

score 0 · Answer 3 · answered Sep 30 '20 at 12:34

0

Please check your CSS file for spelling mistakes.

answered Sep 30 '20 at 12:34

MUHAMMAD SHAHID RAFI C P

1,067
1
12
25

Why is this css "transition" value an "invalid property value"

3 Answers3