title: Why is this css "transition" value an "invalid property value"
body: <p>I have the following CSS (and identical prefixed versions):</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>about which Chrome gives me this nonsense:</p>
  
  <p><img src="https://i.stack.imgur.com/I42hN.png" alt="enter image description here"></p>
  
  <p>Hovering over the warning sign brings up a tooltip: "invalid property value".</p>
  
  <p>I fail to see the difference to this (from <a href="http://css-tricks.com/almanac/properties/t/transition/" rel="nofollow noreferrer">CSS-Tricks</a>):</p>
  
  <blockquote>
    <p>You may comma separate value sets to do different transitions on different properties:</p>
  
  <pre><code>div {
      transition: background 0.2s ease,
                  padding 0.8s linear;
  }
  </code></pre>
  </blockquote>
  
  <p>Note that I cannot use <code>all</code>, because I am setting <code>.style</code> properties in JS which I don't want animated (unless there is a way to exclude <code>top</code> and <code>left</code> from the transition and still use <code>all</code>, which would be nice!).</p>
  
  <p>How can I get my transition working again? Any advice appreciated.</p>
  
  <hr>
  
  <p><strong>Edit:</strong> Removing the prefixed ones didn't fix it, still an "Invalid property value" on transition and its prefixed forms.</p>
  
  <p><strong>Edit 2:</strong> I'm thoroughly confused. I've simplified it to this still-invalid code:</p>
  
  <pre><code>-webkit-transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  </code></pre>
  
  <p><strong>Edit 3:</strong> Turns out the solution was just to update Chrome! I'd still like a workaround if possible.</p>