CSS 动画和过渡在 Firefox 中不合作答案

【问题标题】：CSS animation and transition are not cooperating in FirefoxCSS 动画和过渡在 Firefox 中不合作
【发布时间】：2014-04-17 03:17:32
【问题描述】：

它适用于 Chrome。我不知道为什么 Firefox 会出现这样的问题。文本应该淡入。它还应该在鼠标悬停时改变它的颜色。不幸的是，Firefox 做了其他事情 - 每次我将光标悬停在它上面时，它都会强制文本淡入和淡出。

http://jsfiddle.net/76mfr/2/

CSS：

.sangwinik{
   opacity: 0;
   transition: 500ms ease-in-out;
   -moz-animation-name: fadein;
   -moz-animation-fill-mode:forwards;
   -moz-animation-iteration-count: 1;
   -moz-animation-duration: 1.5s;
}

@-moz-keyframes fadein {
   0%{
      opacity: 0;
    }
   100%{
      opacity: 1;
    }
}

.sangwinik:hover{
   color: #55C1E5;
   text-shadow: 0 0 3px #00FFFF;
}

HTML：

<p class="sangwinik">Sangwinik</p>

【问题讨论】：

这不是 firefox 的错，如果有的话，它是 Chrome 的错，让它看起来好像在工作。
是的，你是对的。正如 Adrift 提到的，我忘记指定应该为哪个属性设置动画。

标签： html css firefox

【解决方案1】：

不要使用all，只指定您想要转换的属性（颜色和文本阴影）：

.sangwinik {
    opacity: 0;
    transition: color 500ms ease-in-out,
                text-shadow 500ms ease-in-out;
   -moz-animation-name: fadein;
   -moz-animation-fill-mode:forwards;
   -moz-animation-iteration-count: 1;
   -moz-animation-duration: 1.5s;
}

.sangwinik:hover {
    color: #55C1E5;
    text-shadow: 0 0 3px #00FFFF;
}

Updated fiddle（我认为不透明度也在过渡）

【讨论】：

非常感谢。我怎么能忘记这件事？最近，我开始学习 CSS。看来我想在太短的时间内吸收太多信息。

【解决方案2】：

从 Firefox 16 开始，浏览器期望 W3C 属性不带 -moz 前缀；看看一些more info。

这应该可行：

.sangwinik{
   opacity: 0;
   transition: 500ms ease-in-out;
   animation-name: fadein;
   animation-fill-mode:forwards;
   animation-iteration-count: 1;
   animation-duration: 1.5s;
}

@keyframes fadein {
   0%{
      opacity: 0;
    }
   100%{
      opacity: 1;
    }
}

.sangwinik:hover{
   color: #55C1E5;
   text-shadow: 0 0 3px #00FFFF;
}

请注意，最好也包含不带供应商前缀的属性（-moz、-webkit），因为它们肯定会在未来的版本中被删除。

【讨论】：

感谢您的回答。这不是我的问题的解决方案，但它仍然是一个非常有用的信息。