Chrome和Safari忽略我的-webkit-transition-

Question

我一直在試圖讓CSS3過渡效果在Chrome和Safari中運行，沒有運氣。正如你在下面的代碼示例中看到的，我使用僞類選擇器觸發一個關鍵幀動畫，在這種情況下，它將div從一個位置移動到另一個位置。只要你點擊另一個鏈接的div消失（它跳回到原來的位置）。

爲了防止這種即時跳躍，我添加了一個過渡效果到div的原始狀態。通過這樣做，過渡將會啓動，div會「滑」回頂端，至少如果您使用的是Firefox或Opera。 Chrome和Safari似乎忽略了過渡效果，我不知道爲什麼？

我從來沒有像以前那樣合併過渡和動畫，所以我可能會錯過什麼？

關於我如何使它在Chrome和Safari中工作的任何想法（最好使用CSS3）？

我使用的是Mac OS X，從Chrome 21，火狐14.0.1和Opera 12.01

這裏有一個jsFiddle和這裏的中的jsfiddle示例中使用的代碼：

的Html

<a href="#id1">One</a> 
<a href="#id2">Two</a> 

<div id="id1"> 
Hello hello 
</div> 

CSS

#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; } 
} 

Answer 1

看起來好像動畫取消了轉場。可能是因爲您沒有明確設置left和top，所以過渡不知道從哪裏開始。

我已經updated your fiddle告訴你，你可以不做動畫。

如果你瞄準動畫在網頁加載發生，只需添加關鍵幀回。

您還可以節省大量的空間，通過使用速記描述並留下了默認值，像forwards

#id1 { 
    position: absolute; 
    top: -100px; 
    left: 100px; 
    width: 100px; 
    height: 100px; 

    -webkit-transition: 0.5s linear; 
     -moz-transition: 0.5s linear; 
     -o-transition: 0.5s linear; 
} 

#id1:target { 
    top: 200px; 
    left: 100px; 
    -webkit-animation: down 0.5s ease-in; 
     -moz-animation: down 0.5s ease-in; 
      -o-animation: down 0.5s ease-in; 
} 

@-webkit-keyframes down { 
     0% { top: -100px;} 
     100% { top: 200px;} 
} 

@-moz-keyframes down { 
     0% { top: -100px;} 
     100% { top: 200px;} 
} 

@-o-keyframes down { 
     0% { top: -100px;} 
     100% { top: 200px;} 
} 

如果您需要超級平滑過渡，請考慮使用2d變換。他們使用子像素的精度，你會注意到（至少在webkit中）緩慢的影響。 See this dabblet。