Use transition on flexbox order

Question

Is there any way to have a transition on the order of flex-box items?

In other words, can I have this (details in this fiddle)

#container {     display: flex; } #container:hover div:last-child {     order: -1; } 

animated (the element getting the new position assumes it's position over time), please?

Answer 1

Sadly no: the order attribute is animatable, but only as integers. That means that for each step/frame of the animation it will interpolate the value by flooring to the neareast integer. So items will only ever show up in the slot that the computed integer value results in, never in-between in any smooth sort of motion way.

It's technically still an animation: the calculated integer position should still follow the timing function and keyframe rules of the animation, it's just that the items "jump" from position to position as they change.

See https://developer.mozilla.org/en-US/docs/Web/CSS/integer#Interpolation