| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 | 5 |
| 6 div { | 6 div { |
| 7 position: absolute; | 7 position: absolute; |
| 8 height: 90px; | 8 height: 90px; |
| 9 width: 90px; | 9 width: 90px; |
| 10 background: blue; | 10 background: blue; |
| 11 } | 11 } |
| 12 | 12 |
| 13 #div1 { | 13 #div1 { |
| 14 z-index: 1; | 14 z-index: 1; |
| 15 left: 100px; | 15 left: 100px; |
| 16 top: 200px; | 16 top: 200px; |
| 17 transform-origin: 0px 0px; | |
| 18 } | 17 } |
| 19 | 18 |
| 20 #div2 { | 19 #div2 { |
| 21 z-index: 3; | 20 z-index: 3; |
| 22 left: 100px; | 21 left: 100px; |
| 23 top: 300px; | 22 top: 300px; |
| 24 transform-origin: 0px 0px; | |
| 25 } | 23 } |
| 26 | 24 |
| 27 </style> | 25 </style> |
| 28 </head> | 26 </head> |
| 29 <body> | 27 <body> |
| 30 <p> | 28 <p> |
| 31 Tests that motion path animations stop an existing transform animation from bein
g composited. | 29 Tests that motion path animations stop an existing transform animation from bein
g composited. |
| 32 <p> | 30 <p> |
| 33 The two squares should make equivalent movements from left to right and back to
left. They need not be perfectly in time. | 31 The two squares should make equivalent movements from left to right and back to
left. They need not be perfectly in time. |
| 34 | 32 |
| (...skipping 15 matching lines...) Expand all Loading... |
| 50 }); | 48 }); |
| 51 | 49 |
| 52 div2.animate([ | 50 div2.animate([ |
| 53 {transform: 'translate(0px)'}, | 51 {transform: 'translate(0px)'}, |
| 54 {transform: 'translate(800px)'} | 52 {transform: 'translate(800px)'} |
| 55 ], { | 53 ], { |
| 56 duration: 2000, | 54 duration: 2000, |
| 57 delay: 1000 | 55 delay: 1000 |
| 58 }); | 56 }); |
| 59 setTimeout(function() { | 57 setTimeout(function() { |
| 60 div2.style.offsetPath = 'path("m 0 0 h -800")'; | 58 div2.style.motionPath = 'path("m 0 0 h -800")'; |
| 61 div2.style.offsetRotate = '0deg'; | 59 div2.style.motionRotation = '0deg'; |
| 62 div2.animate([ | 60 div2.animate([ |
| 63 {offsetDistance: '0%'}, | 61 {motionOffset: '0%'}, |
| 64 {offsetDistance: '100%'} | 62 {motionOffset: '100%'} |
| 65 ], { | 63 ], { |
| 66 duration: 1000 | 64 duration: 1000 |
| 67 }); | 65 }); |
| 68 }, 2000); | 66 }, 2000); |
| 69 } | 67 } |
| 70 | 68 |
| 71 requestAnimationFrame(startAnimations); | 69 requestAnimationFrame(startAnimations); |
| 72 | 70 |
| 73 </script> | 71 </script> |
| 74 | 72 |
| 75 </body> | 73 </body> |
| 76 </html> | 74 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2856513002:
Revert of CSS Motion Path: delete implementation of motion-offset property (Closed)
