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 } | 8 } |
8 .closed { | 9 .closed { |
9 motion-path: path('M 0 0 L 500 0 Z'); | 10 motion-path: path('M 0 0 L 500 0 Z'); |
10 } | 11 } |
11 .open { | 12 .open { |
12 motion-path: path('M 0 0 L 1000 0'); | 13 motion-path: path('M 0 0 L 1000 0'); |
13 } | 14 } |
14 #div1 { | 15 #div1 { |
15 motion-offset: -3700px; | 16 motion-offset: -3700px; |
16 transform: translate3d(0px, 10px, 1px); | 17 transform: translate3d(0px, 10px, 1px); |
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
69 <div class="closed" id="div5">div5</div> | 70 <div class="closed" id="div5">div5</div> |
70 <div class="closed" id="div6">div6</div> | 71 <div class="closed" id="div6">div6</div> |
71 <div class="open" id="div7">div7</div> | 72 <div class="open" id="div7">div7</div> |
72 <div class="open" id="div8">div8</div> | 73 <div class="open" id="div8">div8</div> |
73 <div class="open" id="div9">div9</div> | 74 <div class="open" id="div9">div9</div> |
74 <div class="open" id="div10">div10</div> | 75 <div class="open" id="div10">div10</div> |
75 <div class="open" id="div11">div11</div> | 76 <div class="open" id="div11">div11</div> |
76 <div class="open" id="div12">div12</div> | 77 <div class="open" id="div12">div12</div> |
77 </body> | 78 </body> |
78 </html> | 79 </html> |
OLD | NEW |