'Using `*` selector for transition results in asynchronous effect

In writing some html, I was too lazy to decide a more specific CSS selector like this:

    #z {
        transition-duration:0s;
        transition-delay:1s;
    }

So I had chosen the * selector instead.

I was surprised with the result of this code. Try it:

* {
  transition-duration: 0s;
  transition-delay: .5s;
}

#z {
  color: red;
  background-color: white;
}

#z:hover {
  color: white;
  background-color: red;
}
<html>

<body>
  <div id="z">
    <span>mouse hover here!</span>
  </div>
</body>

</html>

In my browser, transitions take effect in two steps: background-color changes after a 1s delay, followed by the change of color after another 1s delay.

If I switch back from the * selector to a more specific selector, transitions will be simultaneous. Is it browser specific? What is the relevant rule for this result?

EDIT: 1(question rephrased) Is there any specification made by CSS that every browser should follow to implement in this way(as described above), or this is up to browser or even hardware performance? 2\ I've tried it on Chrome, and a browser on an android mobile phone (a touch for a hover). Both produce the same result.

css


Solution 1:[1]

Chrome and Firefox seem to differ in how transition delay impacts inheritance.

The following CSS fixed your issue for me in chromium:

#z * {
  transition-delay: 0s;
}

It sets the transition delay back to 0 for all descendants of #z.

* {
  transition-duration: 0;
  transition-delay: 1s;
}

#z {
  color: red;
  background-color: white;
}

#z:hover {
  color: white;
  background-color: red;
}

#z * {
  transition-delay: 0s;
}
<div id="z">
  <span>mouse hover here!</span>
</div>

Explanation:

The * Universal Selector selects elements of any type, so it's applying a transition delay to both div#z and span.

Chrome seems to interpret this as you wanting a delay for #z to change to white, and then a delay for span to inherit

Hover #z -- 1s --> white text on #z -- 1s --> span inherits white

Firefox seems to interpret this as you wanting a delay for #z to change to white and be inherited

Hover #z -- 1s --> white text on #z --> span inherits white immediately

Here is a crazy example with many nested elements:

* {
  background-color: inherit;
  padding: .5rem;
  transition-duration: 0;
  transition-delay: 1s;
}

#a {
  background-color: white;
}

#a:hover {
  background-color: red;
}

/* This rule seems to stop the propagation
#c {
  transition-delay: 3s;
}
*/
<div id="a">
  a
  <div id="b">
    b
    <div id="c">
      c
      <div id="d">
        d
        <div id="e">
          e
        </div>
      </div>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions