title: CSS3 Vibrate animation without using margin
body: <p>I have a set of 6 strings that I want to vibrate when I hover over them. To do this i'm using keyframe on the margin as shown here <a href="http://jsfiddle.net/A4nBv/1/" rel="nofollow">http://jsfiddle.net/A4nBv/1/</a></p>
  
  <p>The problem is that changing the margin, for example on the top string when hovered over, pushed the rest of the strings down, givng the appearance that all strings are vibrating. I only need the one string to vibrate, can anyone think of a solution using just css?</p>
  
  <pre><code>&lt;div class="strings"&gt;
      &lt;div class="string" id="stringHighE"&gt;&lt;/div&gt;
      &lt;div class="string" id="stringB"&gt;&lt;/div&gt;
      &lt;div class="string" id="stringG"&gt;&lt;/div&gt;
      &lt;div class="string" id="stringD"&gt;&lt;/div&gt;
      &lt;div class="string" id="stringA"&gt;&lt;/div&gt;
      &lt;div class="string" id="stringLowE"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  body, html{
      height:100%;
      width:100%;
  
  }.strings {
      height:100%;
      width:100%;
  }
  .string {
      height:2%;
      margin-bottom:2%;
      background: black;
  }
  #stringLowE:hover, #stringA:hover, #stringDhover, #stringG:hover, #stringB:hover, #stringHighE:hover {
      animation:vibrate 0.1s linear 0s infinite;
      -moz-animation: vibrate 0.1s linear 0s infinite;
      /* Firefox */
      -webkit-animation: vibrate 0.1s linear 0s infinite;
      /* Safari and Chrome */
      -o-animation: vibrate 0.1s linear 0s infinite;
      /* Opera */
  }
  @keyframes vibrate {
      0% {
          padding-top: 0px;
      }
      25% {
          padding-top: -3px;
      }
      50% {
          padding-top: 0px;
      }
      75% {
          padding-top: 3px;
      }
      100% {
          padding-top: 0px;
      }
  }
  @-moz-keyframes vibrate
  /* Firefox */
   {
      0% {
          padding-top: 0px;
      }
      25% {
          padding-top: -3px;
      }
      50% {
          padding-top: 0px;
      }
      75% {
          padding-top: 3px;
      }
      100% {
          padding-top: 0px;
      }
  }
  @-webkit-keyframes vibrate
  /* Safari and Chrome */
   {
      0% {
          padding-top: 0px;
      }
      25% {
          padding-top: -3px;
      }
      50% {
          padding-top: 0px;
      }
      75% {
          padding-top: 3px;
      }
      100% {
          padding-top: 0px;
      }
  }
  @-o-keyframes vibrate
  /* Opera */
   {
      0% {
          padding-top: 0px;
      }
      25% {
          padding-top: -3px;
      }
      50% {
          padding-top: 0px;
      }
      75% {
          padding-top: 3px;
      }
      100% {
          padding-top: 0px;
      }
  }
  </code></pre>