Skip to content

Instantly share code, notes, and snippets.

@silverwind
Created May 26, 2013 15:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save silverwind/5653047 to your computer and use it in GitHub Desktop.
Save silverwind/5653047 to your computer and use it in GitHub Desktop.
Untitled
body {
background: #222
}
div {
height: 200px;
width: 200px;
position:absolute;
background: #f51;
transition: left .5s ease;
}
.left { left: 50px }
.right { left: 500px }
@keyframes nodeInserted {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
body > div {
animation-duration: 0.001s;
animation-name: nodeInserted;
}
// Remove leftover divs from previous run
var element = document.getElementsByTagName("div");
for (index = element.length - 1; index >= 0; index--) {
element[index].parentNode.removeChild(element[index]);
}
// Create a new div dynamically
var div = document.createElement("div");
// Initialize class to "left"
div.setAttribute("class", "left");
document.addEventListener("animationstart", function (event) {
div.setAttribute("class", "right");
}, false);
// Add it
document.body.appendChild(div);
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment