title: Responsive image with CSS animated dangling key that should stay responsively in place
body: <p>Good day,</p>
  
  <p>I am trying to make a nice animation for a website.
  It should be relatively simple. So I have drawn a hand and a BMW car key. Used a <code>css</code> code to make it swing and yes it works.</p>
  
  <p><a href="https://i.stack.imgur.com/k9edY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k9edY.jpg" alt="BMW car keys offered by hand"></a></p>
  
  <p>However it is responsive but not in the way I want it to be. I'd like the key to stay in place where it is. However it is moving just about anywhere depending on the screen size.</p>
  
  <p>I could of course use screen size in <code>css</code>. But I don't want to use screen size. I want to be able to place the animation about anywhere where I'd like it to be.</p>
  
  <p>However when resizing the key moves also anywhere where it would like to be :-/</p>
  
  <p>Probably my approach is entirely wrong. But at this point this is what I'd could come up with. Maybe it is right. But I hope that someone could tell me where and how to correct my mistakes.</p>
  
  <p>My HTML code (of course bootstrap and others are linked in the header)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@-webkit-keyframes swinging {
    0% {
      -webkit-transform: rotate(10deg);
    }
    50% {
      -webkit-transform: rotate(-5deg)
    }
    100% {
      -webkit-transform: rotate(10deg);
    }
  }
  
  @keyframes swinging {
    0% {
      transform: rotate(10deg);
    }
    50% {
      transform: rotate(-5deg)
    }
    100% {
      transform: rotate(10deg);
    }
  }
  
  .swingimage {
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
    animation: swinging 3.5s ease-in-out forwards infinite;
  }
  
  .key_hand {
    /*
          background-image: url('arm_hand.png');
          background-repeat: no-repeat;
          background-size: 100%; */
    min-height: 900px;
  }
  
  .key_hand&gt;.complete_arm {
    position: relative;
    width: 100%;
    z-index: 2;
  }
  
  .key_hand&gt;.bmw_key {
    position: relative;
    display: inline-block;
    top: -390pt;
    left: 7%;
    z-index: 1;
    width: 10%;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
    animation: swinging 3.5s ease-in-out forwards infinite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12 key_hand"&gt;
        &lt;img src="arm_hand.png" class="complete_arm" /&gt;
        &lt;img src="complete_bmw_key.png" class="bmw_key" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have created the following pen. Hoping to shed some light on this case.
  <a href="https://codepen.io/slalex/pen/GXxMmg" rel="nofollow noreferrer">https://codepen.io/slalex/pen/GXxMmg</a></p>