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