Question

我是HTML和CSS编码的初学者，遇到了一个让我疯狂的问题。我当然做了一项激烈的研究，但无法找到解决问题的方法：

我通过CSS在页面加载上创建了一个fadein效果，该效果仅适用于Internet Explorer和Edge中的一个页面，而不是其他页面，尽管它与所有页面的前端应用完全相同。

CSS：

/* KEYFRAMES fadeIn */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body {
  font-family: Lato, sans-serif;
  font-weight: 400;
  background-color: #FFF;
  -webkit-animation: fadeIn ease-in 1;
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 2.5s;
  -moz-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

正如我所说，这只适用于一页，而不适用于其他页面。所有其他浏览器在每个页面都完美地执行淡入淡出，因此我认为它是IE / Edge问题。在HTML端，除了body-tags之间的内容外，一切都是一样的。我也只有一个链接到我的页面的CSS文件包含这个fadein-effect，所以不应该有“双重动画”发生冲突。我希望有人有解决方案。

Answer 1

您的代码与我合作。一定要清空缓存。

如果您是初学者，请务必在其他浏览器中打开正确的文件。检查您的网址。

这可能听起来很愚蠢，但当我为编码加注时，我曾多次犯过这个错误。

您可以与我们分享您的HTML代码吗？

皮尔。

Answer 2

我现在通过执行以下操作解决了我的问题： 1.做了一个if-IE-tag，创建了特定的IE-css文件并将动画放在

中

*{
padding: 0;
margin: 0;  
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
-ms-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1; 
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
-ms-animation-fill-mode:forwards;
animation-fill-mode:forwards; 
-webkit-animation-duration:2.5s;
-moz-animation-duration:2.5s;
-o-animation-duration:2.5s;
-ms-animation-duration:2.5s;
animation-duration:2.5s;
}

像这样。同样在整体“主要”CSS中我把

*{
padding: 0;
margin: 0;  
-ms-animation:fadeIn ease-in 1; 
-ms-animation-fill-mode:forwards;   
-ms-animation-duration:2.5s;    
}

当离开这一步时，IE不会动画，谁知道为什么......我通过这样做将目标锁定在主要的CSS中

@media screen and (-webkit-min-device-pixel-ratio:0) {  
*{
padding: 0;
margin: 0;  
-webkit-animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-duration:2.5s;    
}
}

现在一切都按照假设运作。当然我可以在所有浏览器中使用主要的css，但是这对Firefox只有一个按钮不再起作用有不好的影响。我不知道为什么，但经过大量的研究和尝试，这就成功了。感谢所有想要帮助的人。非常好，直截了当的社区在这里！

Fadein-Effect仅适用于一页

2 个答案: