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 id="a">A</div><div id="b">B</div>
  <button data-toggle="a">Toggle A</button><button data-toggle="b">Toggle B</button>
  <div id="log"></div>
</body>
</html>
 
#a, #b {
  border: 2px solid black;
  background: green;
  color: white;
  width: 50px;
  height: 50px;
}
​
@keyframes animb {
  from {background: red;}
  to {background: blue;}
}
​
#b {
  animation: animb 1s infinite alternate;
}
​
#log {
  white-space: pre;
}
​
.hide {
  display: none;
}
 
for (let button of document.querySelectorAll('button')) {
  button.addEventListener('click', (evt) => {
    document.getElementById(button.getAttribute('data-toggle')).classList.toggle('hide');
  });
}
​
let anim = document.getElementById('b').getAnimations()[0];
anim.effect.target = document.getElementById('a');
document.addEventListener('animationiteration', (event) => {
  document.getElementById('log').innerHTML = `${event.animationName} iteration: time = ${event.elapsedTime}`;
});
Output

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

Dismiss x
public
Bin info
flackrpro
0viewers