mourner/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Animation Test</title>
<style>

html, body {
    height: 100%;
}
button {
    position: relative;
    z-index: 10;
}
.test {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%; left: 50%;
    margin-left: -5px;
    margin-top: -5px;
    background: rgba(255,0,0,0.3);
    border-radius: 5px;
}
.transition .test {
    -webkit-transition: all 5s linear;
    transition: all 5s linear;
}

</style>
</head>
<body>

<p align="center">
    <button id="animate-css">Animate with CSS</button>
    <button id="animate-js">Animate with JS</button>
    <button id="reset">Reset</button><br>
</p>

<script type="text/javascript">

var container = document.getElementById('container');

for (var i = 0; i < 3000; i++) {
    var test = document.createElement('div');
    test.className = 'test';
    document.body.appendChild(test);
}

var jsBtn = document.getElementById('animate-js');
var cssBtn = document.getElementById('animate-css');
var resetBtn = document.getElementById('reset');

var tests = [].slice.call(document.body.getElementsByClassName('test'));

function intervalRand(min, max) {
    return Math.round(min + (max - min) * Math.random());
}

var offsets = [];
for (var i = 0; i < tests.length; i++) {
    var w = window.screen.width,
        h = window.screen.height;
    offsets.push([intervalRand(-w / 2, w / 2), intervalRand(-h / 2, h / 2)]);
}

var transformProp = 'WebkitTransform' in document.body.style ? 'WebkitTransform' : 'transform';

function setTranslate(t) {
    for (var i = 0; i < tests.length; i++) {
        tests[i].style[transformProp] = 'translate3d(' + (offsets[i][0] * t) + 'px,' + (offsets[i][1] * t) + 'px,0)';
    }
}

var frameId;

function reset() {
    window.cancelAnimationFrame(frameId);
    document.body.className = '';

    setTranslate(0);
    document.body.offsetWidth;
}

reset();

cssBtn.onclick = function () {
    reset();
    document.body.className = 'transition';
    setTranslate(1);
};

jsBtn.onclick = function () {
    reset();
    var start = Date.now();

    function frame() {
        var t = Math.min(1, (Date.now() - start) / 5000);
        setTranslate(t);
        if (t < 1) frameId = window.requestAnimationFrame(frame);
    }
    frameId = window.requestAnimationFrame(frame);
};

resetBtn.onclick = reset;

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Animation Test</title>
	<style>

	html, body {
	height: 100%;
	}
	button {
	position: relative;
	z-index: 10;
	}
	.test {
	width: 10px;
	height: 10px;
	position: absolute;
	top: 50%; left: 50%;
	margin-left: -5px;
	margin-top: -5px;
	background: rgba(255,0,0,0.3);
	border-radius: 5px;
	}
	.transition .test {
	-webkit-transition: all 5s linear;
	transition: all 5s linear;
	}

	</style>
	</head>
	<body>

	<p align="center">
	<button id="animate-css">Animate with CSS</button>
	<button id="animate-js">Animate with JS</button>
	<button id="reset">Reset</button><br>
	</p>

	<script type="text/javascript">

	var container = document.getElementById('container');

	for (var i = 0; i < 3000; i++) {
	var test = document.createElement('div');
	test.className = 'test';
	document.body.appendChild(test);
	}

	var jsBtn = document.getElementById('animate-js');
	var cssBtn = document.getElementById('animate-css');
	var resetBtn = document.getElementById('reset');

	var tests = [].slice.call(document.body.getElementsByClassName('test'));

	function intervalRand(min, max) {
	return Math.round(min + (max - min) * Math.random());
	}

	var offsets = [];
	for (var i = 0; i < tests.length; i++) {
	var w = window.screen.width,
	h = window.screen.height;
	offsets.push([intervalRand(-w / 2, w / 2), intervalRand(-h / 2, h / 2)]);
	}

	var transformProp = 'WebkitTransform' in document.body.style ? 'WebkitTransform' : 'transform';

	function setTranslate(t) {
	for (var i = 0; i < tests.length; i++) {
	tests[i].style[transformProp] = 'translate3d(' + (offsets[i][0] * t) + 'px,' + (offsets[i][1] * t) + 'px,0)';
	}
	}

	var frameId;

	function reset() {
	window.cancelAnimationFrame(frameId);
	document.body.className = '';

	setTranslate(0);
	document.body.offsetWidth;
	}

	reset();

	cssBtn.onclick = function () {
	reset();
	document.body.className = 'transition';
	setTranslate(1);
	};

	jsBtn.onclick = function () {
	reset();
	var start = Date.now();

	function frame() {
	var t = Math.min(1, (Date.now() - start) / 5000);
	setTranslate(t);
	if (t < 1) frameId = window.requestAnimationFrame(frame);
	}
	frameId = window.requestAnimationFrame(frame);
	};

	resetBtn.onclick = reset;

	</script>
	</body>
	</html>