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

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

1 个答案: