Use transition on flexbox order

html css css-transitions flexbox
Thorben Croisé picture Thorben Croisé · Sep 17, 2013 · Viewed 17.3k times · Source

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

Emil picture Emil · Aug 31, 2014

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

Related questions

Can CSS3 transition font size?

How can one make the font size grow bigger on mouse over? Color transitions work fine over time, but the font size switches immediately for some reason. Sample code: body p { font-size: 12px; color: #0F9; transition:font-size 12s; -moz-transition:font-size 12…

Read More
CSS3 transition doesn't work with display property

I have been trying to use css to show a Hidden Div fade in whenever I hover its parent element. So far all I have managed to do was to get the hidden div to show, but there are no …

Read More
Slide down animation from display:none to display:block?

Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way? HTML: <div id="box"> Initial …

Read More