Question

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

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>

Answer 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（我认为不透明度也正在转变）

Answer 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）的属性总是好的，因为它们肯定会在将来的版本中下载。

CSS动画和过渡在Firefox中没有合作

2 个答案: