CSS动画和转换在Firefox中不合作

它适用于Chrome。我不知道为什么Firefox会出现这样的问题。文本应该淡入。它还应该在鼠标悬停时更改它的颜色。不幸的是，Firefox做了别的事情 - 每次我将光标悬停在文本上时，它都会强制文本淡入淡出。CSS动画和转换在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>

来源

2014-04-16 user2225809

这不是Firefox的错，如果有什么是Chrome的错，让它看起来像是在工作。 – sheriffderek

是的，你是对的。正如Adrift提到的，我忘了指定哪些属性应该是动画。 – user2225809

而不是使用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（我觉得不透明度正在转变为好）

来源

2014-04-16 19:16:17 Adrift

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

由于火狐16浏览器预计没有-moz前缀W3C财产;看看一些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），因为他们一定会在未来的版本中DROP掉。

来源

2014-04-16 19:17:32 Corneliu

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

CSS动画和转换在Firefox中不合作

回答

相关问题