I just read https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions.
There is a simple example as below:
<div class="box"></div>
and CSS:
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
transform:rotate(180deg);
}
When moving mouse to hover the box, the transition is execute as expected, e.g from .box (initial state) to .box:hover (final state).
However, when moving mouse out of the box, the transition is execute reversely, e.g from .box:hover to .box.
My question is we set CSS transition properties on the initial state or the final state? Whether the specifications clarify this issue?
You can specify the transition-* properties on either the "forward" or "reverse" state of a transition. It doesn't only need to be on the former. The transition module sort of alludes to this:
Authors can specify the value of ‘transition-duration’, ‘transition-timing-function’, or ‘transition-delay’ in the same rule where they specify the value that triggers the transition, or can change these properties at the same time as they change the property that triggers the transition. Since it's the new values of these ‘transition-*’ properties that affect the transition, these values will be used for the transitions to the associated transitioning values.
In the below example I gave a transition-duration on :hover of 4s but you'll notice as soon as you mouse out it goes back to the value of 1s you have specified in your example. You can apply the same rule with the other dynamic pseudo-classes.