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