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 15 matching lines...) Expand all Loading... |
26 margin-left: 100px; | 26 margin-left: 100px; |
27 margin-top: 50px; | 27 margin-top: 50px; |
28 } | 28 } |
29 #square { | 29 #square { |
30 width: 100px; | 30 width: 100px; |
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 animation-name: pop; |
37 -webkit-animation-duration: 1s; | 37 animation-duration: 1s; |
38 » -webkit-animation-fill-mode: forwards; | 38 animation-fill-mode: forwards; |
39 } | 39 } |
40 @-webkit-keyframes pop { | 40 @keyframes pop { |
41 0% { transform: scale(0.05); opacity: 0; } | 41 0% { transform: scale(0.05); opacity: 0; } |
42 33% { transform: scale(1.00); opacity: 1; } | 42 33% { transform: scale(1.00); opacity: 1; } |
43 66% { transform: scale(1.66); opacity: 1; } | 43 66% { transform: scale(1.66); opacity: 1; } |
44 100% { 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 |