title: How to trigger animation when key pressed
body: <p>I have fully working the animation cycle when you click it, but how can I do the same switch effect when pressing A?. The same switch effect back and fort. Thank you so much.</p>
  
  <p>It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.</p>
  
  <p><strong>DEMO:</strong>
  <a href="https://jsfiddle.net/rihotzu/nywbvxqd/1/#" rel="nofollow noreferrer">https://jsfiddle.net/rihotzu/nywbvxqd/1/#</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!doctype &lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;sprite test&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="default"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="script.js" charset="utf-8"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
      background-color: black;
    margin: 0;
    padding: 0;
  }
  
  .default{
      cursor: pointer;
      position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(10361px / 11);
    height: 210px;
    background: url(https://i.imgur.com/sz8vhOh.jpg);
    animation: open 0.5s steps(11);
      animation-fill-mode: forwards;
      animation-play-state: paused;
  }
  
  .default2{
      cursor: pointer;
      position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(10361px / 11);
    height: 210px;
    background: url(https://i.imgur.com/sz8vhOh.jpg);
    animation: open 0.5s steps(11);
      animation-fill-mode: forwards;
      animation-play-state: running;
  }
  
  .back{
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(10361px / 11);
      height: 210px;
      background: url(https://i.imgur.com/sz8vhOh.jpg);
      animation: close 0.5s steps(11);
      animation-fill-mode: forwards;
      animation-play-state: running;
  }
  
  @keyframes open
  {
      from
      {
          background-position: 0;
      }
      to
      {
          background-position: -10361px;
      }
  }
  
  
  @keyframes close
  {
      from
      {
          background-position: -10361px;
  
      }
      to
      {
          background-position: 0;
      }
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('.default').click(function() {
    $(this).removeClass('default');
    $(this).addClass('default2');
  
  
  
    $('.default2').click(function() {
      $(this).removeClass('default2');
      $(this).addClass('back');
  
  
  
      $('.back').click(function() {
          $(this).toggleClass('back');
          $(this).toggleClass('default2');
      });
  
    });
  
  });
  </code></pre>