OLD | NEW |
1 <!DOCTYPE> | 1 <!DOCTYPE> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 .box { | 5 .box { |
6 width: 400px; | 6 width: 400px; |
7 height: 100px; | 7 height: 100px; |
8 margin: 10px; | 8 margin: 10px; |
9 border: 1px solid blue; | 9 border: 1px solid blue; |
10 -webkit-transition-property: text-indent; | 10 transition-property: text-indent; |
11 -webkit-transition-duration: 1s; | 11 transition-duration: 1s; |
12 -webkit-transition-timing-function: linear; | 12 transition-timing-function: linear; |
13 } | 13 } |
14 | 14 |
15 .indent { | 15 .indent { |
16 text-indent: 0; | 16 text-indent: 0; |
17 } | 17 } |
18 | 18 |
19 #container.final .indent { | 19 #container.final .indent { |
20 text-indent: 100px; | 20 text-indent: 100px; |
21 } | 21 } |
22 | 22 |
(...skipping 16 matching lines...) Expand all Loading... |
39 </head> | 39 </head> |
40 <body> | 40 <body> |
41 | 41 |
42 <div id="container"> | 42 <div id="container"> |
43 <div id="box1" class='indent box'>Text is affected by transition of text-ind
ent.</div> | 43 <div id="box1" class='indent box'>Text is affected by transition of text-ind
ent.</div> |
44 </div> | 44 </div> |
45 | 45 |
46 <div id="result"></div> | 46 <div id="result"></div> |
47 </body> | 47 </body> |
48 </html> | 48 </html> |
OLD | NEW |