Html CSS动画适用于Chrome和Safari，但不适用于Firefox和Internet Explorer

我有一个简单的css动画在我的网站上运行，应该只是在我的网页在不同的时间淡出不同的部分。不幸的是，我的页面的这一方面仅在chrome和Safari中有效，而在Firefox和IE中无效。 在做了一些研究之后，我加入了淡入淡出时间范围的单位值，但这并没有带来任何改进。以下是css：

a {
   text-decoration: none; color: #FFFFFF; position: relative;
   transition: all 0.25s linear;
   -moz-transition: all 0.25s linear;
   -webkit-transition: all 0.25s linear;
   -o-transition: all 0.25s linear;
}


/*Animations*/
@-webkit-keyframes FADEY {
   0% { opacity: 0; }
   100% { opacity: 1; }
}

.intro {
   -webkit-animation-name: FADEY;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: 1;
 }


[role="article"] {
   -webkit-opacity: 0;
   -webkit-animation-name: FADEY;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-delay: 0.5s;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: 1;
}


.design-selection, .design-archives {
   -webkit-opacity: 0;
   -webkit-animation-name: FADEY;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-delay: 1s;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: 1;
}

如有任何建议，将不胜感激。 谢谢

---

choltz

您当前拥有用于动画的Webkit供应商前缀，

-Webkit

。这就是为什么它只适用于基于Webkit的浏览器，如Chrome和Safari。对于旧版本的Firefox，还需要添加

-moz-

。当前的Firefox和Internet Explorer只使用真实版本，

动画

，没有前缀

.intro {
   -webkit-animation-name: FADEY;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: 1;
   -moz-animation-name: FADEY;
   -moz-animation-duration: 1s;
   -moz-animation-timing-function: ease-in-out;
   -moz-animation-iteration-count: 1;
   animation-name: FADEY;
   animation-duration: 1s;
   animation-timing-function: ease-in-out;
   animation-iteration-count: 1;
 }

您还可以编写CSS速记，以尽量减少代码行数：

-webkit-animation:FADEY 1s 1 ease-in-out;
-moz-animation:FADEY 1s 1 ease-in-out;
animation:FADEY 1s 1 ease-in-out;

---

包括所有浏览器前缀，不仅仅是-webkit还应该添加

动画

，不带任何前缀。谢谢。另外，这里是关于浏览器支持的信息：非常感谢各位。你们真的帮了大忙。