一定间隔后的Javascript旋转动画

Question

我是js的初学者，正在尝试制作蛇游戏。我需要在一定间隔后将蛇形块一个接一个地移动，但是在进行动画处理时，这些块需要彼此连接而不分开。

代码：

function rotate() {
 var blocks = document.querySelectorAll('.block');
 [].forEach.call(blocks, function(block, i) {
  setTimeout(function(){  
   block.style.transition= '-webkit-transform .3s linear';
   block.style.transform='translate(350px)'
  },i*30);
 });
}

document.querySelector('.container').addEventListener('click',rotate);

Style.css：

.block {
width: 15px;
height: 15px;
background: grey;
border-radius: 50%;  
}

index.html

<div class="container" id="container">
    <div class="block" id="block1"></div>
    <div class="block" id="block2"></div>
    <div class="block" id="block3"></div>
    <div class="block" id="block4"></div>