| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 div { | 5 div { |
| 6 position: absolute; | 6 position: absolute; |
| 7 transform-origin: 0% 0%; | 7 transform-origin: 0% 0%; |
| 8 } | 8 } |
| 9 .closed { | 9 .closed { |
| 10 motion-path: path('M 0 0 L 500 0 Z'); | 10 offset-path: path('M 0 0 L 500 0 Z'); |
| 11 } | 11 } |
| 12 .open { | 12 .open { |
| 13 motion-path: path('M 0 0 L 1000 0'); | 13 offset-path: path('M 0 0 L 1000 0'); |
| 14 } | 14 } |
| 15 #div1 { | 15 #div1 { |
| 16 motion-offset: -3700px; | 16 offset-distance: -3700px; |
| 17 transform: translate3d(0px, 10px, 1px); | 17 transform: translate3d(0px, 10px, 1px); |
| 18 } | 18 } |
| 19 #div2 { | 19 #div2 { |
| 20 motion-offset: 200px; | 20 offset-distance: 200px; |
| 21 transform: translate3d(0px, 20px, 2px); | 21 transform: translate3d(0px, 20px, 2px); |
| 22 } | 22 } |
| 23 #div3 { | 23 #div3 { |
| 24 motion-offset: 4100px; | 24 offset-distance: 4100px; |
| 25 transform: translate3d(0px, 30px, 3px); | 25 transform: translate3d(0px, 30px, 3px); |
| 26 } | 26 } |
| 27 #div4 { | 27 #div4 { |
| 28 motion-offset: -370%; | 28 offset-distance: -370%; |
| 29 transform: translate3d(0px, 40px, 4px); | 29 transform: translate3d(0px, 40px, 4px); |
| 30 } | 30 } |
| 31 #div5 { | 31 #div5 { |
| 32 motion-offset: 20%; | 32 offset-distance: 20%; |
| 33 transform: translate3d(0px, 50px, 5px); | 33 transform: translate3d(0px, 50px, 5px); |
| 34 } | 34 } |
| 35 #div6 { | 35 #div6 { |
| 36 motion-offset: 410%; | 36 offset-distance: 410%; |
| 37 transform: translate3d(0px, 60px, 6px); | 37 transform: translate3d(0px, 60px, 6px); |
| 38 } | 38 } |
| 39 #div7 { | 39 #div7 { |
| 40 motion-offset: -3700px; | 40 offset-distance: -3700px; |
| 41 transform: translate3d(0px, 70px, 7px); | 41 transform: translate3d(0px, 70px, 7px); |
| 42 } | 42 } |
| 43 #div8 { | 43 #div8 { |
| 44 motion-offset: 200px; | 44 offset-distance: 200px; |
| 45 transform: translate3d(0px, 80px, 8px); | 45 transform: translate3d(0px, 80px, 8px); |
| 46 } | 46 } |
| 47 #div9 { | 47 #div9 { |
| 48 motion-offset: 4100px; | 48 offset-distance: 4100px; |
| 49 transform: translate3d(0px, 90px, 9px); | 49 transform: translate3d(0px, 90px, 9px); |
| 50 } | 50 } |
| 51 #div10 { | 51 #div10 { |
| 52 motion-offset: -370%; | 52 offset-distance: -370%; |
| 53 transform: translate3d(0px, 100px, 10px); | 53 transform: translate3d(0px, 100px, 10px); |
| 54 } | 54 } |
| 55 #div11 { | 55 #div11 { |
| 56 motion-offset: 20%; | 56 offset-distance: 20%; |
| 57 transform: translate3d(0px, 110px, 11px); | 57 transform: translate3d(0px, 110px, 11px); |
| 58 } | 58 } |
| 59 #div12 { | 59 #div12 { |
| 60 motion-offset: 410%; | 60 offset-distance: 410%; |
| 61 transform: translate3d(0px, 120px, 12px); | 61 transform: translate3d(0px, 120px, 12px); |
| 62 } | 62 } |
| 63 </style> | 63 </style> |
| 64 </head> | 64 </head> |
| 65 <body> | 65 <body> |
| 66 <div class="closed" id="div1">div1</div> | 66 <div class="closed" id="div1">div1</div> |
| 67 <div class="closed" id="div2">div2</div> | 67 <div class="closed" id="div2">div2</div> |
| 68 <div class="closed" id="div3">div3</div> | 68 <div class="closed" id="div3">div3</div> |
| 69 <div class="closed" id="div4">div4</div> | 69 <div class="closed" id="div4">div4</div> |
| 70 <div class="closed" id="div5">div5</div> | 70 <div class="closed" id="div5">div5</div> |
| 71 <div class="closed" id="div6">div6</div> | 71 <div class="closed" id="div6">div6</div> |
| 72 <div class="open" id="div7">div7</div> | 72 <div class="open" id="div7">div7</div> |
| 73 <div class="open" id="div8">div8</div> | 73 <div class="open" id="div8">div8</div> |
| 74 <div class="open" id="div9">div9</div> | 74 <div class="open" id="div9">div9</div> |
| 75 <div class="open" id="div10">div10</div> | 75 <div class="open" id="div10">div10</div> |
| 76 <div class="open" id="div11">div11</div> | 76 <div class="open" id="div11">div11</div> |
| 77 <div class="open" id="div12">div12</div> | 77 <div class="open" id="div12">div12</div> |
| 78 </body> | 78 </body> |
| 79 </html> | 79 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2241993002:
CSS Motion Path: New names for properties (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master