html - CSS 动画和过渡在 Firefox 中不合作

Question

它适用于 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>

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 (我认为不透明度也在转变)