dima85,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div.hot{
width: 100px;
height: 100px;
border: 1px dashed Gray;
padding: 5px;
color: #FFFFFF;
font-size: 24px;
line-height: 100px;
text-align: center;
}
.Red{
background-color: Red;
}
</style>
</head>
<body>
<div class="hot Red" id="number"></div>
<script>
var d = performance.now(),
from = numY = 0,
elem = document.querySelector('#number');
requestAnimationFrame(function e(a) {
a = (a - d) / 200;
1 < a && (a = 1);
elem.innerHTML = from + (numY - from) * a | 0;
1 == a && (d = performance.now(), from = numY);
requestAnimationFrame(e)
})
setInterval(function() {
numY = (100 + Math.random()*3000|0);
}, 1000);
</script>
</body>
</html>