Bug using transition-delay

Question

I got snagged on some code earlier and found it was based on transition-delay not applying to a transition if its property was set before the transition itself. I was wondering if this is a bug or expected behaviour.

I've made a little pen to show an example of what I mean: https://codepen.io/itsharryfrancis/pen/pGBRBR

It's essentially shows the difference between:

.test1 {
  .block {
    transition: background 1s;
    transition-delay: 1s;
  }
}

and

.test2 {
  .block {
    transition-delay: 1s;
    transition: background 1s;
  }
}

I'm guessing if it is expected it's due to the cascade nature of CSS?

Answer 1

so what you have faced is a known issue with shorthand properties.

transition in this case is a shorthand property

i can explain with case of margin

so margin is shorthand for margin-top, margin-right, margin-bottom and margin-left

so if you do

margin-top: 20px;
margin : 10px;

margin property will actually override the margin-top;

in your case transition is overriding transition-delay

you can read about this on mdn also https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases . see case no.1

Answer 2

  .block {
    transition-delay: 1s;
    transition-property: background;
    transition-duration: 1s;
  }

you need to specify the property and the time