By nonopolarity


2020-01-14 13:07:12 8 Comments

The following will do CSS transition for the width first, and then the height:

setTimeout(() => {
  document.querySelector("#foo").style.width = "200px";
  document.querySelector("#foo").style.height = "200px";
}, 0)
#foo {
  transition-property: width, height;
  transition-duration: 1s, 1s;
  transition-delay: 0s, 1s;
  background: #07f;
  width: 50px;
  height: 50px;
}
<div id="foo"></div>

However, if the first transition-delay is changed from 0s to 0, then it will fail for Google Chrome and Firefox (it looks like the whole delay line is not parsed and ignored). But on Safari and MS Edge (the non-Chromium based version as of the December 2019), it worked as before:

setTimeout(() => {
  document.querySelector("#foo").style.width = "200px";
  document.querySelector("#foo").style.height = "200px";
}, 0)
#foo {
  transition-property: width, height;
  transition-duration: 1s, 1s;
  transition-delay: 0, 1s;
  background: #07f;
  width: 50px;
  height: 50px;
}
<div id="foo"></div>

So which behavior is correct? Like length units, CSS treats 0 as 0px. But why 0 is not treated as 0s on Chrome and Firefox? Do we need a unit for 0 (such as do we need to say 0 inch or 0 cm or 0 yard, because they are all the same). Is the behavior correct on Chrome / Firefox or on Safari / MS Edge?

Related Questions

Sponsored Content

6 Answered Questions

[SOLVED] CSS transition shorthand with multiple properties?

52 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

  • 2010-08-18 02:50:35
  • Hailwood
  • 1065544 View
  • 2160 Score
  • 52 Answer
  • Tags:   css css-transitions

32 Answered Questions

[SOLVED] Transitions on the CSS display property

  • 2010-07-25 22:52:49
  • RichardTape
  • 1533196 View
  • 1472 Score
  • 32 Answer
  • Tags:   css css-transitions

8 Answered Questions

[SOLVED] How to have multiple CSS transitions on an element?

2 Answered Questions

3 Answered Questions

[SOLVED] CSS transition of a div does not animate

2 Answered Questions

[SOLVED] Problematic CSS transition based on em units

1 Answered Questions

[SOLVED] Javascript/CSS resize div synchronization

1 Answered Questions

[SOLVED] CSS Transitions applied even if activated after state change?

Sponsored Content