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

Question

我在我的网站上运行了一个简单的 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;
}

如有任何建议，我们将不胜感激。谢谢，乔尔兹

Answer 1

您当前拥有用于动画的 Webkit 供应商前缀 -webkit。这就是为什么它只适用于基于 Webkit 的浏览器，例如 Chrome 和 Safari。对于旧版本的 Firefox，您还需要添加 -moz-。当前的 Firefox 和当前的 Internet Explorer 只是使用真正的版本，没有前缀的 animation。

.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;