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。