| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style type="text/css"> | 4 <style type="text/css"> |
| 5 #animatable { | 5 #animatable { |
| 6 position: absolute; | 6 position: absolute; |
| 7 left: 0; | 7 left: 0; |
| 8 top: 0; | 8 top: 0; |
| 9 height: 100px; | 9 height: 100px; |
| 10 width: 100px; | 10 width: 100px; |
| 11 background-color: green; | 11 background-color: green; |
| 12 -webkit-border-radius: 10px; | 12 border-radius: 10px; |
| 13 -webkit-transition: -webkit-transform 1s; | 13 transition: transform 1s; |
| 14 } | 14 } |
| 15 | 15 |
| 16 #poster { | 16 #poster { |
| 17 font-family: 'Georgia', serif; | 17 font-family: 'Georgia', serif; |
| 18 font-size: 36px; | 18 font-size: 36px; |
| 19 font-weight: bold; | 19 font-weight: bold; |
| 20 text-align: center; | 20 text-align: center; |
| 21 margin-top: 28px; | 21 margin-top: 28px; |
| 22 } | 22 } |
| 23 | 23 |
| (...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 70 if (j > 0) | 70 if (j > 0) |
| 71 style += " "; | 71 style += " "; |
| 72 | 72 |
| 73 var values = initialValues; | 73 var values = initialValues; |
| 74 if (Math.floor(i / Math.pow(2, j)) % 2 == 1) | 74 if (Math.floor(i / Math.pow(2, j)) % 2 == 1) |
| 75 values = targetValues; | 75 values = targetValues; |
| 76 | 76 |
| 77 style += values[j]; | 77 style += values[j]; |
| 78 } | 78 } |
| 79 | 79 |
| 80 elem.style.webkitTransform = style; | 80 elem.style.transform = style; |
| 81 i++; | 81 i++; |
| 82 | 82 |
| 83 document.getElementById("from").innerHTML = "From:<br> " + oldStyle; | 83 document.getElementById("from").innerHTML = "From:<br> " + oldStyle; |
| 84 document.getElementById("to").innerHTML = "To:<br> " + style; | 84 document.getElementById("to").innerHTML = "To:<br> " + style; |
| 85 document.getElementById("estimate").innerHTML = "Buffon estimate of pi aft
er " + trials.toString() + " needle drops:<br>" + estimate.toString(); | 85 document.getElementById("estimate").innerHTML = "Buffon estimate of pi aft
er " + trials.toString() + " needle drops:<br>" + estimate.toString(); |
| 86 | 86 |
| 87 oldStyle = style; | 87 oldStyle = style; |
| 88 | 88 |
| 89 if (i < iterations) | 89 if (i < iterations) |
| 90 setTimeout(triggerTransition, 1000); | 90 setTimeout(triggerTransition, 1000); |
| (...skipping 30 matching lines...) Expand all Loading... |
| 121 <body> | 121 <body> |
| 122 <div id="animatable"><p id="poster">Hi!</p></div> | 122 <div id="animatable"><p id="poster">Hi!</p></div> |
| 123 <div id="text"> | 123 <div id="text"> |
| 124 <p id="from">From:</p> | 124 <p id="from">From:</p> |
| 125 <p id="to">To:</p> | 125 <p id="to">To:</p> |
| 126 <p id="estimate">Estimate:</p> | 126 <p id="estimate">Estimate:</p> |
| 127 </div> | 127 </div> |
| 128 </body> | 128 </body> |
| 129 </html> | 129 </html> |
| 130 | 130 |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2530253002:
CSS Animations: Reduce usage of webkit prefix in perf tests (Closed)
