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因此转换不知道从哪里开始。

我已经更新了你的小提琴 ，告诉你你可以不用动画。

如果您的目标是在页面加载时发生动画，只需重新添加关键帧即可。

您还可以通过使用速记描述并省略默认值（如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中）缓慢效果。 看到这个dabblet 。