[csswg-drafts] [css-cascade-4] Why are transitions the highest priority? (#12369)

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

== [css-cascade-4] Why are transitions the highest priority? ==
I look at the cascading order and one thing that surprises me is the **Transition declarations**. Why are they the highest priority?

> **[Origin and Importance](https://drafts.csswg.org/css-cascade-4/#cascade-origin)**
>
> The [origin](https://drafts.csswg.org/css-cascade-4/#origin) of a [declaration](https://drafts.csswg.org/css-syntax-3/#declaration) is based on where it comes from and its [importance](https://drafts.csswg.org/css-cascade-4/#important) is whether or not it is declared with !important (see [below](https://drafts.csswg.org/css-cascade-4/#importance)). The precedence of the various origins is, in descending order:
>
> - Transition declarations [[css-transitions-1]](https://drafts.csswg.org/css-cascade-4/#biblio-css-transitions-1)
> - [Important](https://drafts.csswg.org/css-cascade-4/#important) [user agent](https://drafts.csswg.org/css-cascade-4/#cascade-origin-ua) declarations
> - [Important](https://drafts.csswg.org/css-cascade-4/#important) [user](https://drafts.csswg.org/css-cascade-4/#cascade-origin-user) declarations
> - [Important](https://drafts.csswg.org/css-cascade-4/#important) [author](https://drafts.csswg.org/css-cascade-4/#cascade-origin-author) declarations
> - Animation declarations [[css-animations-1]](https://drafts.csswg.org/css-cascade-4/#biblio-css-animations-1)
> - [Normal](https://drafts.csswg.org/css-cascade-4/#normal) [author](https://drafts.csswg.org/css-cascade-4/#cascade-origin-author) declarations
> - [Normal](https://drafts.csswg.org/css-cascade-4/#normal) [user](https://drafts.csswg.org/css-cascade-4/#cascade-origin-user) declarations
> - [Normal](https://drafts.csswg.org/css-cascade-4/#normal) [user agent](https://drafts.csswg.org/css-cascade-4/#cascade-origin-ua) declarations
> 
> Declarations from [origins](https://drafts.csswg.org/css-cascade-4/#origin) earlier in this list win over declarations from later origins.

For example, **[Important](https://drafts.csswg.org/css-cascade-4/#important) [author](https://drafts.csswg.org/css-cascade-4/#cascade-origin-author) declarations** can easily override **Animation declarations**:

```html
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: green !important;
  animation: changeColor 1s infinite;
}

@keyframes changeColor {
  100% {
    background-color: red;
  }
</style>
<div class="box"></div>
```

Is there any example of **Transition declarations** dominating the rest of the list?

P.S I tried to find at least some information on this, but there is nothing, it remains to ask the specifiers.

@tabatkins 


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


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

Received on Thursday, 19 June 2025 08:29:33 UTC