title: Transition on multiple elements at the same time using JavaScript
body: <p>Cheers! I'm having an issue debugging certain behavior that occurs mostly in the Chrome browser. Here is the simplified example: <a href="https://jsfiddle.net/pd3xb2uo/" rel="nofollow noreferrer">https://jsfiddle.net/pd3xb2uo/</a></p>
  <p>The objective is to transition multiple elements via JS code at the same time. In the example when you click on the button, items are moved to the left using <code>translate3d</code> added via JS. It works fine, but there are some caveats:</p>
  <ol>
  <li>There is a small gap appearing between the items most of the time</li>
  <li>Sometimes when you click faster on the button there is a large gap appearing between the items.</li>
  </ol>
  <p>Here are the screenshots of both cases:</p>
  <p><a href="https://i.stack.imgur.com/b1A8B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b1A8B.png" alt="small gap" /></a></p>
  <p><a href="https://i.stack.imgur.com/ODkGO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ODkGO.png" alt="large gap" /></a></p>
  <p>Any help or ideas on why it is happening would be highly appreciated:) It looks like there is a few milliseconds delay before the style attribute is updated on certain elements, but I have no idea why:/</p>