translation-animation-subpixel-offset.html (812B)
1 <!DOCTYPE html> 2 <title>Translation-only transform animation with subpixel offset</title> 3 <link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> 4 <link rel="help" href="https://crbug.com/1155029"> 5 <link rel="match" href="translation-animation-subpixel-offset-ref.html"> 6 <style> 7 @keyframes move { 8 0% {transform: translateY(10px);} 9 100% {transform: translateY(10px);} 10 } 11 #red { 12 position: absolute; 13 top: 11px; 14 left: 1px; 15 width: 100px; 16 height: 100px; 17 background: red; 18 } 19 #container { 20 position: absolute; 21 top: 0.4px; 22 left: 0.6px; 23 } 24 #target { 25 position: relative; 26 top: 0.4px; 27 left: 0.6px; 28 width: 100px; 29 height: 100px; 30 background: green; 31 animation: move 1s infinite alternate; 32 } 33 </style> 34 <div id="red"></div> 35 <div id="container"> 36 <div id="target"></div> 37 </div>