flexbox_interactive_order-transitions.html (1579B)
1 <!DOCTYPE html> 2 <title>flexbox | flex-flow and transitioned order</title> 3 <link rel="author" href="http://opera.com" title="Opera Software"> 4 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> 5 <meta name="flags" content="interact"> 6 <style> 7 div { 8 background: blue; 9 padding: 0; 10 margin: 1em 0; 11 border: 1px solid black; 12 width: 20em; 13 height: 8em; 14 15 display: flex; 16 flex-flow: column-reverse wrap-reverse; 17 } 18 span { 19 background: white; 20 margin: 1em; 21 width: 8em; 22 height: 1.5em; 23 display: inline-block; 24 } 25 .one { 26 background: pink; 27 order: -1; 28 } 29 div:hover .one { 30 transition: order 4s; 31 order: 4; 32 } 33 .two { 34 background: yellow; 35 order: 3; 36 } 37 .three { 38 background: black; 39 color: white; 40 order: 2; 41 } 42 .four { 43 background: fuchsia; 44 color: white; 45 order: 1; 46 } 47 p~div { 48 padding: 1em 0 0; 49 margin-right: 1em; 50 height: 7em; 51 float: left; 52 display: block; 53 } 54 p~div span { 55 float: left; 56 } 57 </style> 58 59 <div> 60 <span class="one">one</span> 61 <span class="two">two</span> 62 <span class="three">three</span> 63 <span class="four">four</span> 64 </div> 65 66 <p>Verify that the box above looks exactly like the first of the boxes 67 below. Then hover the blue area above and leave the mouse there for 4 68 seconds. After the specified time, the box above should look exactly 69 like the second of the boxes below.</p> 70 71 <div> 72 <span class="two">two</span> 73 <span class="four">four</span> 74 <span class="three">three</span> 75 <span class="one">one</span> 76 </div> 77 78 <div> 79 <span class="one">one</span> 80 <span class="three">three</span> 81 <span class="two">two</span> 82 <span class="four">four</span> 83 </div>