| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .stage { |
| margin: 20px; |
| width: 300px; height: 250px; |
| border: 2px solid black; |
| transform-style: preserve-3d; |
| } |
| |
| .slide { |
| width: 100%; |
| height: 100%; |
| animation-duration: 20ms; |
| animation-fill-mode: forwards; |
| -webkit-backface-visibility: hidden; |
| background-color: blue; |
| } |
| |
| .animating { |
| animation-name: slide; |
| } |
| |
| @keyframes slide { |
| 0% { transform-origin: 50% 50%; transform: translateX(400px); } |
| 50% { transform-origin: 50% 50%; transform: translateX(0px); } |
| 100% { transform-origin: 50% 50%; transform: translateX(0px); } |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function animationEnded() |
| { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| window.addEventListener('load', () => { |
| document.getElementById('target').classList.add('animating'); |
| }, false); |
| </script> |
| </head> |
| <body> |
| <div class="stage"> |
| <div id="target" class="slide" onanimationend="animationEnded()"></div> |
| </div> |
| </body> |
| </html> |
