Skip to content

Instantly share code, notes, and snippets.

@oli oli/dabblet.css
Created Jan 22, 2015

Embed
What would you like to do?
Does anyone transition Flexbox order yet?
/* Does anyone transition Flexbox order yet?
http://dev.w3.org/csswg/css-flexbox/#order-property */
/* ✘ Chrome 28
✘ Safari 6.0.3
✘ Firefox 20
✓ Aurora 22
? IE 10
*/
.wrapper {
display: flex;
border: 2px solid #def;
transition: all 0.5s ease-out;
}
.box {
transition: all 0.5s ease-out;
width: 33%;
min-height: 4em;
padding: 0.75em 0;
text-align: center;
border: 2px solid #444;
background-color: #eee
}
.a {
order: 1;
background-color: #ddd;
}
.wrapper:hover .a {
order: 2;
}
.b {
order: 2;
background-color: #eee;
}
.wrapper:hover .b {
order: 3;
}
.c {
order: 3;
background-color: #fff;
}
.wrapper:hover .c {
order: 1;
}
<div class="wrapper">
<div class="box a">a</div>
<div class="box b">b</div>
<div class="box c">c</div>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.