flexbox_interactive_order-transitions-2.html (1329B)
1 <!DOCTYPE html> 2 <title>flexbox | 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 display: flex; 9 } 10 span { 11 background: yellow; 12 width: 1em; 13 height: 2em; 14 } 15 .test { 16 background: #3366cc; 17 order: 0; 18 } 19 div:hover .test { 20 transition: order 10s; 21 order: -1; 22 } 23 p~div { 24 margin: 1em; 25 float: left; 26 display: block; 27 } 28 p~div span { 29 float: left; 30 } 31 </style> 32 33 <div> 34 <span>x</span> 35 <span>x</span> 36 <span>x</span> 37 <span>x</span> 38 <span>x</span> 39 <span>x</span> 40 <span>x</span> 41 <span>x</span> 42 <span class="test">x</span> 43 <span>x</span> 44 </div> 45 46 <p>Verify that the box above looks exactly like the first of the boxes 47 below. Then hover the box above and leave the mouse there for 1+ 48 seconds. After the specified time, the box above should look exactly 49 like the second of the boxes below.</p> 50 51 <div> 52 <span>x</span> 53 <span>x</span> 54 <span>x</span> 55 <span>x</span> 56 <span>x</span> 57 <span>x</span> 58 <span>x</span> 59 <span>x</span> 60 <span class="test">x</span> 61 <span>x</span> 62 </div> 63 64 <div> 65 <span class="test">x</span> 66 <span>x</span> 67 <span>x</span> 68 <span>x</span> 69 <span>x</span> 70 <span>x</span> 71 <span>x</span> 72 <span>x</span> 73 <span>x</span> 74 <span>x</span> 75 </div>