Untitled

dabblet.css

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;
}

dabblet.js

// 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);

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}