title: Chrome and Safari ignores my -webkit-transition-
body: <p>I've been trying to get a CSS3 transition effect to work in Chrome and Safari without no luck. As you can see in the code example below I'm using the <code>:target</code> pseudo class selector to trigger a keyframe-animation which, in this case, moves the div from one position to another. As soon as you click another link the div disappears (it jumps back to it's original position). </p>
  
  <p>To prevent this instant jump, I've added a transition effect to the original state of the div. By doing this, the transition will kick in and the div will "slide" back to the top, at least if you are using Firefox or Opera. Chrome and Safari seems to ignore the transition effect and I'm not sure why? </p>
  
  <p>I have never combined transitions and animations like this before, so I might be missing something? </p>
  
  <p>Any ideas on how I can make it work in Chrome and Safari (preferably with CSS3)?</p>
  
  <p>I'm using Mac OS X, Chrome 21, Firefox 14.0.1 and Opera 12.01</p>
  
  <p>Here's a <a href="http://jsfiddle.net/sRaDK/4/" rel="nofollow">jsFiddle</a> and here's the code used in the jsFiddle example: </p>
  
  <p>Html</p>
  
  <pre><code>&lt;a href="#id1"&gt;One&lt;/a&gt;
  &lt;a href="#id2"&gt;Two&lt;/a&gt;
  
  &lt;div id="id1"&gt;
  Hello hello
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#id1 {
      position: absolute;
      top: -100px;
      left: 100px;
      width: 100px;
      height: 100px;
  
      /* Not working */
      -webkit-transition-timing-function: linear;
      -webkit-transition-duration: 0.5s;
  
      /* Working */
      -moz-transition-timing-function: linear;
      -moz-transition-duration: 0.5s;
  
      /* Working */
      -o-transition-timing-function: linear;
      -o-transition-duration: 0.5s;    
  }
  
  #id1:target {
       -webkit-animation: down 0.5s ease-in forwards;
          -moz-animation: down 0.5s ease-in forwards;
            -o-animation: down 0.5s ease-in forwards;
  }
  
  @-webkit-keyframes down {
        0%   { top: -100px; left: 100px; }
        100% { top: 200px; left: 100px;  }
  }
  
  @-moz-keyframes down {
        0%   { top: -100px; left: 100px; }
        100% { top: 200px; left: 100px;  }
  }
  
  @-o-keyframes down {
        0%   { top: -100px; left: 100px; }
        100% { top: 200px; left: 100px;  }
  }
  </code></pre>
  
  <p>​</p>