title: Why is my CSS3 Transition not working in Firefox?
body: <p>It's working elsewhere on the site using the same CSS as far as I can tell. 
  It works in Chrome.
   Here is the full page: anthonyotislawrence.com</p>
  
  <p>Here's the part that's not working:</p>
  
  <pre><code>&lt;a class="socialBox linkedIn"&gt;
      &lt;h3&gt;LinkedIn&lt;/h3&gt;
      &lt;p&gt;linkedin.com/anthonyotislawrence&lt;/p&gt;
  &lt;/a&gt; 
  &lt;a class="socialBox facebook"&gt;
      &lt;h3&gt;Facebook&lt;/h3&gt;
      &lt;p&gt;facebook.com/anthonyotislawrence&lt;/p&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>and the CSS</p>
  
  <pre><code>.socialBox {
      display:block;
      min-width:200px;
      padding:4px 0 4px 55px;
      height:40px;
      line-height:20px;
      background-repeat:no-repeat;
      background-position:left center;
      position:relative;
      -webkit-transition: all .5s ease-out;
      -moz-transition: all .5s ease-out;
      transition: all .5s ease-out;
      text-decoration:none;
      margin:30px 0;
  }
  .socialBox.linkedIn {
      background-image:url(../images/linkedin.png);
  }
  .socialBox.facebook {
      background-image:url(../images/facebook.png);
  }
  .socialBox:hover {
      left:15px;
      cursor:pointer;
  }
  .socialBox:hover p {
      text-decoration:underline;
  }
  </code></pre>