Плавное перемещение картинки

Хочу сделать плавное смещение изображения на определенное количество пикселей при нажатии, моментальное перемещение уже написал, теперь хочу сделать плавное, чтобы можно было скорость движения указать. Как это лучше сделать?

<div style="position: relative">
<img id="imgid" style="position: absolute; left: 10px" src="images/img.png">
</div>
<a href="" id="knopka">Переместить изображение</a>
<script>
knopka.onclick = function() {
var leftImage = 100;
document.getElementById("imgid").style.left = leftImage + 100 + 'px';
}
</script>