| OLD | NEW |
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <script> | 3 <script> |
| 4 if (window.testRunner) { | 4 if (window.testRunner) { |
| 5 testRunner.dumpAsText(); | 5 testRunner.dumpAsText(); |
| 6 testRunner.waitUntilDone(); | 6 testRunner.waitUntilDone(); |
| 7 } | 7 } |
| 8 | 8 |
| 9 function animationEnded() { | 9 function animationEnded() { |
| 10 var result = document.getElementById("result"); | 10 var result = document.getElementById("result"); |
| (...skipping 20 matching lines...) Expand all Loading... |
| 31 height: 100px; | 31 height: 100px; |
| 32 position: absolute; | 32 position: absolute; |
| 33 top: 100px; | 33 top: 100px; |
| 34 background-color: blue; | 34 background-color: blue; |
| 35 opacity: 0; | 35 opacity: 0; |
| 36 -webkit-animation-name: pop; | 36 -webkit-animation-name: pop; |
| 37 -webkit-animation-duration: 1s; | 37 -webkit-animation-duration: 1s; |
| 38 -webkit-animation-fill-mode: forwards; | 38 -webkit-animation-fill-mode: forwards; |
| 39 } | 39 } |
| 40 @-webkit-keyframes pop { | 40 @-webkit-keyframes pop { |
| 41 0% { -webkit-transform: scale(0.05); opacity: 0; } | 41 0% { transform: scale(0.05); opacity: 0; } |
| 42 33% { -webkit-transform: scale(1.00); opacity: 1; } | 42 33% { transform: scale(1.00); opacity: 1; } |
| 43 66% { -webkit-transform: scale(1.66); opacity: 1; } | 43 66% { transform: scale(1.66); opacity: 1; } |
| 44 100% { -webkit-transform: scale(0.95); opacity: 0.5; } | 44 100% { transform: scale(0.95); opacity: 0.5; } |
| 45 } | 45 } |
| 46 </style> | 46 </style> |
| 47 </head> | 47 </head> |
| 48 | 48 |
| 49 <body> | 49 <body> |
| 50 <div id="square" onwebkitanimationend="animationEnded();"></div> | 50 <div id="square" onwebkitanimationend="animationEnded();"></div> |
| 51 <div id="result"></div> | 51 <div id="result"></div> |
| 52 </body> | 52 </body> |
| 53 </html> | 53 </html> |
| 54 | 54 |
| OLD | NEW |