| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 div { | 3 div { |
| 4 position: absolute; | 4 position: absolute; |
| 5 width: 100px; | 5 width: 100px; |
| 6 height: 100px; | 6 height: 100px; |
| 7 font-size: 50px; |
| 7 } | 8 } |
| 8 | 9 |
| 9 #expectation { | 10 #expectation { |
| 10 font-size: 50px; | |
| 11 background: red; | 11 background: red; |
| 12 transform: translate(1em, 1em); | 12 transform: translate(1em, 1em); |
| 13 } | 13 } |
| 14 | |
| 15 #target { | |
| 16 font-size: 1px; | |
| 17 background: green; | |
| 18 } | |
| 19 </style> | 14 </style> |
| 20 <div id="expectation"></div> | 15 <div id="expectation"></div> |
| 21 <div id="target"></div> | |
| 22 <script> | 16 <script> |
| 23 target.style.fontSize = "50px"; | 17 var target = document.createElement('div'); |
| 18 target.style.background = 'green'; |
| 24 target.animate([ | 19 target.animate([ |
| 25 {transform: "translate(1em, 1em)"}, | 20 {transform: "translate(1em, 1em)"}, |
| 26 {transform: "translate(1em, 1em)"}, | 21 {transform: "translate(1em, 1em)"}, |
| 27 ], { | 22 ], { |
| 28 duration: 1000, | 23 duration: 1000, |
| 29 iterations: Infinity, | 24 iterations: Infinity, |
| 30 }); | 25 }); |
| 26 document.body.appendChild(target); |
| 31 </script> | 27 </script> |
| OLD | NEW |