flexbox_interactive_flex-shrink-transitions.html (1146B)
1 <!DOCTYPE html> 2 <title>flexbox | transitioned flex-shrink</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-shrink-property"> 5 <meta name="flags" content="interact"> 6 <style> 7 div { 8 width: 12em; 9 height: 8em; 10 11 display: flex; 12 } 13 span { 14 background: yellow; 15 width: 8em; 16 flex: 0 1 auto; 17 } 18 #test, #ref { 19 background: #3366cc; 20 } 21 div:hover #test { 22 transition: flex-shrink 4s; 23 flex-shrink: 2; 24 } 25 p~div { 26 margin-right: 1em; 27 float: left; 28 display: block; 29 } 30 p~div span { 31 width: 3em; 32 height: 8em; 33 float: left; 34 } 35 p~div~div span { 36 width: 4em; 37 } 38 </style> 39 40 <div> 41 <span>x</span> 42 <span id="test"></span> 43 <span>x</span> 44 <span>x</span> 45 </div> 46 47 <p>Verify that the box above looks exactly like the first of the boxes 48 below. Then hover the box above and leave the mouse there for 4 49 seconds. After the specified time, the blue color should disappear, and 50 the box above should look like the second of the boxes below.</p> 51 52 <div> 53 <span>x</span> 54 <span id="ref"></span> 55 <span>x</span> 56 <span>x</span> 57 </div> 58 59 <div> 60 <span>x</span> 61 <span>x</span> 62 <span>x</span> 63 </div>