Как сделать прокрутку анимации? Что бы она покрутилась 3 раза и остановилась на выбранном изображении?
<body>
<input type="button" value="go" onclick="r()">
<div style="overflow: hidden;">
<div style="width: 100px;height: 100px; transition: transform .3s ease-in-out;" class="fortun">
<img style="width: 100px;height: 100px" src="http://www.pngall.com/wp-content/uploads/2016/03/Butterfly-PNG-6.png">
<img style="width: 100px;height: 100px" src="https://img2.freepng.ru/20180228/bbw/kisspng-parrot-bird-blue-and-yellow-macaw-stock-photograph-parrot-bako-5a9659ccea79f5.9220246915198028289604.jpg">
<img style="width: 100px;height: 100px" src="https://img2.freepng.ru/20180702/soa/kisspng-california-spangled-kitten-american-shorthair-euro-5b3aefa8c74863.7669235015305890968163.jpg">
</div>
</div>
<script>
function r() {
run(1)
}
function run(y) {
var img =y*100;
var d =document.querySelector(".fortun");
d.style.transform="translate(0px, -"+img+"px)";
}
</script>
</body>
</html>
