额外位（在看到添加的Dropbox链接后）

Question

任何人都可以帮我制作这个Chrome CSS代码跨平台吗？它在Firefox中无法正常工作，或者在IE8中无法正常工作。我非常感谢你的帮助，感谢您的阅读。

.revision-span-in {
    opacity: 0;
}
.revision-span:not(.revision-span-out) {
    transition: 1s;
    -webkit-transition: 1s;
}
.revision-span-out {
    position:absolute;
    opacity: 0;
}

编辑 - 这是包含下面建议代码的页面，其中问题在Firefox中仍然存在。页面上的所有文本都应该每隔一段时间淡入淡出，但有时随机部分会出现没有淡入淡出的情况。如果它第一次正常工作，尝试刷新，你会明白我的意思。该页面是Twine的输出，修改后的CSS就在底部。再次感谢。

Example HTML page with inconsistent fade ins in Firefox

Answer 1

你只需要在那里抛出一些浏览器供应商前缀。

根据transition的{{3}}，您只需要-webkit，-moz和-o：

.revision-span-in {
    opacity: 0;
}
.revision-span:not(.revision-span-out) {
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
}
.revision-span-out {
    position:absolute;
    opacity: 0;
}

您将无法在IE9及更低版本中获得支持。

Answer 2

通常对于这些实验性功能（所以一般情况下，如果您不确定它，请查找它）最好查看浏览器是否支持它。由于所有主流浏览器都不完全支持转换，因此您需要为尚未完全支持它的所有浏览器添加前缀。因此，根据MDN's Browser support list和Statcounter's browser usage stats，您应该拥有以下内容：

.revision-span-in {
    opacity: 0;
}
.revision-span:not(.revision-span-out) {
    transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
}
.revision-span-out {
    position:absolute;
    opacity: 0;
}

由于~~这两个webkit浏览器都没有一个通常使用的版本，它没有前缀而不完全支持它，并且~~ firefox不需要前缀，这应该可行。您遇到的问题表明您暂时没有更新您的Firefox，如果您要测试您的网站在其他浏览器中的显示效果，我强烈建议您确保＆＃39;我得到了最新的版本。自16版以来，Firefox已经支持没有-moz-前缀的语法，现在它已经是版本26（目前最常用的是25）。

当然如果真的想要支持甚至几乎没有人因为自动更新而使用的浏览器（例如Firefox＆lt; 16），你应该确实喜欢 ~~Zach Saucier < em>（删除了他的答案）~~ JoshC说还包括-moz-前缀。完全不需要-ms-前缀，因为支持转换的每个IE版本也支持它而不需要该前缀。

编辑：为Android/Blackberry default browser添加-webkit-。

<小时/>

额外位（在看到添加的Dropbox链接后）

考虑到Dropbox链接，我认为导致它的原因是：当第二个元素显示时，Firefox仍然会动画第一个元素，因此它不会重新启动动画。

这可以解释为什么它会随机发生：它只发生在Firefox有几毫秒的延迟时间，而firefox继续从第二个动画的起点播放第二个项目的动画。这很可能是因为您的项目是嵌套的，因此第一行的动画将由第二行的动画继承，依此类推。

由于你的动画长度恰好是0.5秒，并且显示元素之间的间隔也是0.5秒，如果有一点点延迟，这会导致这些问题。我建议在显示每个元素（可能是10或50ms左右）之间放一个微小的额外空间，或者将项目从嵌套方法更改为兄弟方法。所以，而不是：

<div class="body content">
  <span class="first">500ms
    <span class="second">500ms
      <span class="third">500ms
        <span class="fourth">500ms</span>
      </span>
    </span>
  </span>
</div>

使用此：

<div class="body content">
  <span class="first">500ms</span>
  <span class="second">500ms</span>
  <span class="third">500ms</span>
  <span class="fourth">500ms</span>
</div>

因此，不是将跨度附加到当前跨度，而是将其附加到父元素.body.content。我会给你一个演示，但你的脚本看起来非常复杂（可能是因为它是由某些东西产生的），所以你必须自己尝试这样做。您还可以尝试在每个项目的动画启动之间添加一些额外的空间，看看是否可以修复它。

Answer 3

我将再次告诉你css3仍在进行中。如果你想调用css规则，那么使用他们的浏览器提供的供应商前缀。注意Internet Explorer 9和早期版本没有支持过渡财产。

-moz-          for firefox use 
-webkit-       for safari and chrome because both uses the same browser engines
-ms-           for microsoft
-o-            for opera

.revision-span-in {
    opacity: 0;
}
.revision-span:not(.revision-span-out) {
    transition: 1s;
    -webkit-transition: 1s;/*for chrome and safari*/
    -moz-transition: 1s;/*for firefox*/
    -ms-transition: 1s;/*for ie*/
    -o-transition: 1s;/*for opera*/
     transition: 1s;
}
.revision-span-out {
    position:absolute;
    opacity: 0;
}

制作简单的CSS跨平台

3 个答案:

额外位（在看到添加的Dropbox链接后）