title: Keyboard navigation between div`s CSS transition issue
body: <p>I'm working at a carousel like CSS transition between div`s that will be used as the header of a mouse-less application. The transition gives the feel of a "flow" between two neighboring elements.
  You can see here the work I've done until now: <a href="https://codepen.io/anon/pen/GOWVGR" rel="nofollow noreferrer">https://codepen.io/anon/pen/GOWVGR</a>. The focus of the elements is controlled using the 'a' key for left and the 's' key for right.</p>
  
  <p>I almost made it work using a gradient and a background position transition, except I can't figure out how to code the effect when moving towards one direction only, case in which the previous elements "background" goes back to the initial background position instead of "following" the newly selected div`s background position.</p>
  
  <pre><code>.left, .right {
      background-size: 202% 100%;
      background-image: linear-gradient(to right, transparent 50%,green 50%);
      -webkit-transition: background-position .3s ease-in-out;
      -moz-transition: background-position .3s ease-in-out;
      transition: background-position .3s ease-in-out;
  }
  
  .left:focus {
      background-position: 100% 0;
  }
  
  .right:focus {
      background-position: -100% 0;
  }
  </code></pre>
  
  <p>The desired effect is "working" only in one case, if you press right-left (s - a) or left-right (a - s) in the demo I created. I also added the following image to make it more easy to understand the desired effect.
  <a href="https://i.stack.imgur.com/LRVfA.png" rel="nofollow noreferrer">Desired flow of menu</a></p>
  
  <p>Any ideas will be very appreciated! Thank you!</p>