【问题标题】：Making simple CSS cross-platform使简单的 CSS 跨平台
【发布时间】：2013-12-27 10:13:05
【问题描述】：

谁能帮我制作这个 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

【问题讨论】：

标签： css google-chrome

【解决方案1】：

您只需在其中添加一些浏览器供应商前缀即可。

基于transition 的current support，您只需要-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 及更低版本不支持。

【讨论】：

非常感谢您的帮助！我不知道为什么，但文本淡入仅在某些时候在 Firefox 中有效（我在其他地方被告知这是因为代码是用于 Chrome 的）。 CSS 正在 Twine 游戏中使用，所以我认为问题可能是在其他地方引起的。你会说你发布的代码应该在 100% 的时间内工作吗？再次感谢。
@user3138070 没有理由不应该一直工作。你有一个例子证明它不起作用吗？也许某些 CSS 正在被缓存或什么...？或者可能有一些 JS 干扰它..
我已将示例链接到 OC 中。也许修改后的代码与 Twine 的内置 CSS 冲突？再次感谢。

【解决方案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，如果您要测试您的网站在其他浏览器中的外观，我强烈建议您确保您已获得最新版本。 Firefox 从版本 16 开始支持不带 -moz- 前缀的语法，现在是版本 26（目前最常用的是 25）。

当然，如果你真的想要支持由于自动更新而几乎没人使用的浏览器（例如 Firefox Zach Saucier （删除了他的答案） JoshC 说还包括-moz- 前缀。不过，-ms- 前缀根本不需要，因为支持转换的每个版本的 IE 也都支持它，而不需要那个前缀。

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

额外位（在看到添加的保管箱链接后）

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

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

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

<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。我会给你一个演示，但你的脚本看起来非常复杂（可能是因为它是由某些东西生成的），所以你必须自己尝试这样做。您还可以尝试在每个项目的动画开始之间放置一点额外的空间，看看是否可以解决问题。

【讨论】：

1+ 我认为 -ms 只是用于 IE9 的预发布版本 - 虽然不是正面的......这有点奇怪，因为 IE9 中的 CSS 转换需要 -ms .. caniuse.com/transforms2d .. 我真的不认为其他任何事情都需要它。
Firefox 是最新的，我刚刚检查过。我在 OP 中链接了一个示例页面。谢谢。
@JoshC 我已将 -ms- 添加到代码中。我在那个页面上没有看到它，在 MDN 上根本没有提到它。
@joeytje50 不，我只是再次确认您不需要需要-ms这一事实。你是对的，你不需要在代码中。唯一需要-ms 的属性是transform。看到这个：caniuse.com/transforms2d
@user3138070 这确实看起来很奇怪。看起来这更像是一个错误而不是不正确的代码。我在 Opera 中为This mineturtle I made 发生了同样的事情，嘴巴动画只播放一次。也许这是 CSS 动画的一个常见错误，动画不再播放（或者在您的情况下，它只在一段时间后播放）。

【解决方案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;
}

【讨论】：