| <!DOCTYPE html> | |
| <style> | |
| div { | |
| position: absolute; | |
| width: 100px; | |
| height: 100px; | |
| font-size: 50px; | |
| } | |
| #expectation { | |
| background: red; | |
| transform: translate(1em, 1em); | |
| } | |
| </style> | |
| <div id="expectation"></div> | |
| <script> | |
| var target = document.createElement('div'); | |
| target.style.background = 'green'; | |
| target.animate([ | |
| {transform: "translate(1em, 1em)"}, | |
| {transform: "translate(1em, 1em)"}, | |
| ], { | |
| duration: 1000, | |
| iterations: Infinity, | |
| }); | |
| document.body.appendChild(target); | |
| </script> |