[csswg-drafts] [css-transition-2] `transition` property in `@starting-style` (#12350)

otomad has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-transition-2] `transition` property in `@starting-style` ==
If we want to change the transition of the starting style, we must declare it in the regular selector. For example:

```css
.foo {
 opacity: 1;
 transition: opacity ease-out 1s;

 @starting-style {
  opacity: 0;
 }
}
```

However, this will also change the subsequent transition.

```css
.foo {
 opacity: 1;
 transition: opacity ease-out 1s;

 &:hover {
  opacity: 0.9;
 }

 @starting-style {
  opacity: 0;
 }
}
```

The hover state style transition duration will also become 1s, actually I don't want to be too long.

#### Suggestion

Can we put the transition declarations for the starting style in the `@starting-style` rule? This will not change the subsequent transition. For example:

```css
.foo {
 opacity: 1;
 transition: opacity ease-out 250ms;

 &:hover {
  opacity: 0.9;
 }

 @starting-style {
  opacity: 0;
  transition: opacity ease-out 1s;
  /* or */
  transition-duration: 1s;
 }
}
```

At present, this declaration is invalid. The transition properties located within the `@starting-style` rule will be directly ignored. So we can use it.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12350 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 17 June 2025 09:38:18 UTC