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

Question

我一直在尝试让 CSS3 过渡效果在 Chrome 和 Safari 中运行，但没有成功。正如您在下面的代码示例中看到的那样，我正在使用:target 伪类选择器来触发关键帧动画，在这种情况下，它将 div 从一个位置移动到另一个位置。一旦您单击另一个链接，div 就会消失（它会跳回原来的位置）。

为了防止这种瞬间跳跃，我在 div 的原始状态中添加了过渡效果。通过这样做，转换将开始，并且 div 将“滑”回顶部，至少在您使用 Firefox 或 Opera 时是这样。 Chrome 和 Safari 似乎忽略了过渡效果，我不知道为什么？

我以前从未像这样组合过过渡和动画，所以我可能会遗漏一些东西？

关于如何让它在 Chrome 和 Safari 中运行（最好使用 CSS3）有什么想法吗？

我使用的是 Mac OS X、Chrome 21、Firefox 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.