Closed
Description
I look at the cascading order and one thing that surprises me is the Transition declarations. Why are they the highest priority?
The origin of a declaration is based on where it comes from and its importance is whether or not it is declared with !important (see below). The precedence of the various origins is, in descending order:
- Transition declarations [css-transitions-1]
- Important user agent declarations
- Important user declarations
- Important author declarations
- Animation declarations [css-animations-1]
- Normal author declarations
- Normal user declarations
- Normal user agent declarations
Declarations from origins earlier in this list win over declarations from later origins.
For example, Important author declarations can easily override Animation declarations:
<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.