css-transform-animate-translate-implied-y.html (971B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test (Transforms): Animating between translates where one has an implied `y` value</title> 5 <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com"> 6 <meta name="assert" content='This tests that translate(x) is animated as if it were translate(x, 0px)'> 7 <link rel=match href=css-transform-animate-translate-implied-y-ref.html> 8 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-translate"> 9 <style> 10 #box { 11 background:red; 12 width: 200px; 13 height: 200px; 14 } 15 </style> 16 </head> 17 <body> 18 <div id=box></div> 19 <script> 20 let anim = document.getElementById('box').animate([ 21 { transform: 'translate(180px)' }, 22 { transform: 'translate(20px, 0px)' } 23 ], { 24 duration: 1000, 25 }); 26 anim.pause(); 27 anim.currentTime = 500; 28 </script> 29 </body> 30 </html>