Is a new transition always applied before the new value? - css

Question

Suppose I'm using transition, to smoothly change an element's position on hover. I also change the value of transition itself to achieve a different animation in each direction.
It seems like when I move the mouse over the elements, the new transition value is used for the "forward" transition, and when I un-hover, the old value is used for the "reverse" transition.
I couldn't find much documentation about this. Is the order guaranteed?
div {
background: red;
width: 40px;
height: 40px;
position: absolute;
top: 30px;
left: 0px;
transition: left 1s linear, top 1s ease-in-out;
}
:hover div {
top: 150px;
left: 400px;
transition: left 1s linear, top 1s linear;
}
div:nth-child(2) { transition-delay: 0.1s; }
div:nth-child(3) { transition-delay: 0.2s; }
div:nth-child(4) { transition-delay: 0.3s; }
Hover on me!
<div></div>
<div></div>
<div></div>
<div></div>

Answer 1

[...] all 3 properties change their values when I hover on the element, and it's not intuitively clear in which order the changes are applied, at least coming from background experience with a framework such as Core Animation where "model" and "presentation" layers are separate things and the parameters of an animation are set up before the animation starts running. I think your answer makes sense though...
I think the key difference here is that thinking about transition in terms of "animations starting while the element is/isn't :hovered" is the wrong way to think about it.
You are right, the paradigm you're used to (an MVC paradigm) doesn't really apply to CSS. At least not at the level where you as a CSS "writer" are affected. The relevant spec for this, by the way, is CSS Transitions
In CSS, changes to CSS properties apply immediately. Transitions allow you to apply a change to a value over some duration. In your case, you have four divs who are all set to be 30px from the top and 0px from the left edges of the screen.
On hover, thanks to your :hover div selector, new styles apply. Normally they'd apply instantaneously, but because you gave them a transition, it happens over a duration. You can see each one move individually thanks to the transition-delay you gave some of them, as well. To make it even easier to see, I changed the color of each div to be unique. It should be pretty clear which ones move first.
As soon as you remove your mouse, the :hover pseudo-class no longer applies, and so the styles under div are re-applied. Again, they would be instantaneously applied, but the transition you set (along with the transition-delay on 3 of the 4 divs) changes that to occur over a longer duration. So, just as when the :hover` styles apply, the red div moves first, then the others after an increasing 0.1s delay each.
div {
background: red;
width: 40px;
height: 40px;
position: absolute;
top: 30px;
left: 0px;
transition: left 1s linear, top 1s ease-in-out;
}
:hover div {
top: 150px;
left: 400px;
transition: left 1s linear, top 1s linear;
}
div:nth-child(2) { transition-delay: 0.1s; background: blue; }
div:nth-child(3) { transition-delay: 0.2s; background: green; }
div:nth-child(4) { transition-delay: 0.3s; background: yellow; }
Hover on me!
<div></div>
<div></div>
<div></div>
<div></div>