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

16,776

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.

Share:
16,776
JJJollyjim
Author by

JJJollyjim

Updated on June 11, 2022

Comments

  • JJJollyjim
    JJJollyjim almost 2 years

    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.