title: Transition doesn't work on FF
body: <p>I have the below simple HTML and CSS. It works in Chrome fine. but not FF. I mean the <code>transition</code> doesn't work on FF. I'm using FF 18.  I searched the issue on Google and SO and find some hacks. But none of them works for my issue. Any idea please?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="image-list cf"&gt;    
      &lt;figure&gt;
          &lt;a href="javascript:return false;"&gt;
              &lt;img src="image-src-1"/&gt;
          &lt;/a&gt;
          &lt;span&gt;
              &lt;a href="javascript:return false;"&gt;File Name 1&lt;/a&gt;
          &lt;/span&gt;
          &lt;span&gt;
              10 Images
          &lt;/span&gt;
      &lt;/figure&gt;    
      &lt;figure&gt;
          &lt;a href="javascript:return false;"&gt;
              &lt;img src="image-src-1"/&gt;
          &lt;/a&gt;
          &lt;span&gt;
              &lt;a href="javascript:return false;"&gt;File Name 1&lt;/a&gt;
          &lt;/span&gt;
          &lt;span&gt;
              10 Images
          &lt;/span&gt;
      &lt;/figure&gt;
      &lt;-- and more --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* images list
  **********************************************************/
  .image-list {}
  .image-list figure {
      float: right;
      width: 180px;
      border: 1px solid;
      border-color: #aaa;
      border-radius: 0;
      box-shadow: 
          1px 0 0 #fff, 
          0 1px 0 #fff, 
          -1px 0 0 #fff, 
          0 -1px 0 #fff,
          0 0 2px #000;
      margin-right: 29px;
      text-align: center;
      padding: 10px 0;
      background-color: #fff;
      -webkit-transition: all .3s ease 0s;
      -moz-transition: all .3s ease 0s;
      -o-transition: all .3s ease 0s;
      transition: all .3s ease 0s;
  }
  .image-list figure:hover{
      border-color: #666;
      box-shadow: 
          1px 0 0 #fff, 
          0 1px 0 #fff, 
          -1px 0 0 #fff, 
          0 -1px 0 #fff,
          0 0 10px #000;
  }
  [class="image-list"] figure:hover {
      border-color: #666;
      box-shadow: 
          1px 0 0 #fff, 
          0 1px 0 #fff, 
          -1px 0 0 #fff, 
          0 -1px 0 #fff,
          0 0 10px #000;
  }
  .image-list figure a {}
  .image-list figure a img {}
  .image-list figure span {
      display: block;
      padding: 5px 0;
      width: 160px;
      margin: 0 auto;
      overflow: hidden;
      height: 1em;
  }
  .image-list figure span a {}
  </code></pre>