Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div></div>
</body>
</html>
 
div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
 
var element = document.querySelector('div');
element.animate([
  {transform: 'translateX(0px)', backgroundColor: 'red'},
  {transform: 'translateX(100px)', backgroundColor: 'blue'},
  {transform: 'translateX(50px)', backgroundColor: 'green'},
  {transform: 'translateX(0px)', backgroundColor: 'red'},
  //...
], {
    duration: 3000,
    iterations: 3
})
// Chrome doesn’t have the promise yet
.onfinish = _ => {
 element.textContent = 'I’m done animating!';
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
surmapro
0viewers