html - 使用 HTML 和 CSS 淡化横幅适用于除 Internet Explorer 之外的所有浏览器（所有版本）

Question

动画横幅只是不显示在 IE 中。它在所有浏览器中都能完美运行。需要建议来解决这个问题。我想避免使用 js，并且只想使用 CSS 和 HTML 进行编码。在为浏览器提供前缀之后，它在 IE 中不起作用。

@keyframes fader {
  0% {
    background: url(images/1Frame300x180.png);
    background-size: cover;
  }
  25% {
    background: url(images/2Frame300x180.png);
    background-size: cover;
  }
  50% {
    background: url(images/3Frame300x180.png);
    background-size: cover;
  }
  75% {
    background: url(images/4Frame300x180.png);
    background-size: cover;
  }
  100% {
    background: url(images/1Frame300x180.png);
    background-size: cover;
  }
}

#wrapper {
  max-width: 300px;
  max-height: 250px;
  border: none;
  margin: 0 auto;
  padding: 0px;
}

#gallery {
  max-width: 300px;
  border: none;
  margin: 0 auto;
  background: skyblue;
  -webkit-animation: fader 12s infinite;
  -moz-animation: fader 12s infinite;
  -o-animation: fader 12s infinite;
  -ms-animation: fader 12s infinite;
  animation: fader 12s infinite;
}

<div id="wrapper">
  <div id="gallery">
    <a href="#">
      <img src="http://placekitten.com/300/180" alt="" style="width: 100%; opacity: 0;" />
    </a>
  </div>
  <div>
    <img src="images/logo300x70.png" alt="" style="width:100%;" />
  </div>
</div>

标签： htmlcss

Answer 1

警告！此 CSS3 代码仅适用于 Firefox、Chrome、Safari 以及可能更新版本的 IE（版本 9 之后）

由于 IE9 不支持 css3 动画但支持 opacity: 0; 属性，您将必须让 ie9 加载一个单独的 ie9 css，您将所有淡入淡出类设置为不透明度：1

你应该试试这个：

#gallery{
       -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
       -ms-animation: fadein 2s; /* Internet Explorer */
       -o-animation: fadein 2s; /* Opera < 12.1 */
        animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}