![](/img/trans.png)
[英]CSS works fine in Chrome, Firefox, and Safari, however fails in Internet Explorer
[英]CSS animation works in Chrome and Safari, but not in Firefox and 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;
}
任何建议将不胜感激。 谢谢,科尔茨
当前,您具有用于动画的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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.