<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test{
background-color: rgb(51, 153, 0);
color: rgb(102, 255, 255);
}
</style>
</head>
<body>
<span class="time"></span>
<script>
function timer(a) {
var c = performance.now();
requestAnimationFrame(function d(b) {
b = (b - c) / a.duration;
1 < b && (b = 1);
a.elem.innerHTML = a.from + (a.to - a.from) * b | 0;
b == 1 && a.callback && a.callback();
1 > b && requestAnimationFrame(d)
})
};
var span = document.querySelector('.time');
timer({
from : 1000,
to : 500,
duration: 5 *1000,
elem : span,
callback : function() { span.classList.add('test')}
})
</script>
</body>
</html>