1

我一直在尝试让 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;  }
}

​</p>

4

1 回答 1

3

看起来好像动画取消了过渡。可能是因为您没有明确设置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 中）效果很慢。看到这个小短片。

于 2012-08-09T20:23:16.250 回答