title: How can I focus an input that's sliding in from off the screen?
body: <p>I have an element (<code>#cols</code>) that's 3x wider than the <code>&lt;body&gt;</code>. It has 3 columns, each of which is exactly as wide as <code>&lt;body&gt;</code>. Clicking a button slides the <code>#cols</code> element over by the width of one column and simultaneously focuses the <code>&lt;input&gt;</code> in the column that's sliding into view:</p>
  
  <p><a href="http://jsbin.com/puhurakewa/1/edit?html,css,js,output" rel="nofollow">http://jsbin.com/puhurakewa/1/edit?html,css,js,output</a></p>
  
  <p>The problem, as you can see from the demo, is that focusing the input causes weird behavior. I believe the browser says,</p>
  
  <blockquote>
    <p>"<em>Crap</em>, the user focused an input that's off-screen. I need to show it!"</p>
  </blockquote>
  
  <p>and then magically scrolls the input into view. This breaks the transition.</p>
  
  <p>Is there a way to disable this behavior? It's extremely undesirable. I've noticed it in Chrome, Safari, and Firefox on my Mac.</p>
  
  <p>EDIT: Thank you for the answers so far. I should have been more specific with my question. I'm aware that I can "work around" this issue by waiting for the animation to end, but what I'm curious about is how to work <em>through</em> this issue and focus the input immediately. It's a better experience, because users can begin typing before the transition is over.</p>