Question

我在Firefox中的某些文字上遇到animation: fadein属性运行平稳的问题。

它不是像Chrome一样逐渐消失，而是似乎突然出现并使整个事物变得笨重。由于图像具有相同的fadein指令并且平滑淡入，因此这看起来也很奇怪。

我尝试使用-moz前缀，但这似乎没有帮助。以下是我的代码。
有任何建议吗？

＆＃13;

.fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.img-fade {
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}
h3 {
  text-align: center;
  font-size: 24px;
  font-weight: normal;
  font-style: italic;
  opacity: 0.9;
  filter: alpha(opacity=90);
  text-decoration: underline;
  text-decoration-color: white;
  moz-text-decoration-color: white;
  -webkit-animation: fadein 2s;
  -webkit-animation-delay: 0.75s;
  -webkit-animation-fill-mode: forwards;
  ;
  -moz-animation: fadein 2s;
  -moz-animation-delay: 0.75s;
  -moz-animation-fill-mode: forwards;
  -ms-animation: fadein 2s;
  -ms-animation-delay: 0.75s;
  -ms-animation-fill-mode: forwards;
  ;
  -o-animation: fadein 2s;
  -o-animation-delay: 0.75s;
  -o-animation-fill-mode: forwards;
  animation: fadein 2s;
  animation-delay: 0.75s;
  animation-fill-mode: forwards;
  visibility: hidden;
}

＆＃13;

<div class="fixed-center">
  <p>
    <a href="#" class="img-fade">
      <img src="http://placehold.it/125x149" width="125" height="149" />
    </a>
  </p>
  <h3><p><a href="#">enter</a></p></h3>
</div>

＆＃13;

Answer 1

删除H3的样式（或者你可以根据需要添加中心）并按照以下方式执行： https://jsfiddle.net/8z6sj6tr/1/

<div class="fixed-center">
  <p>
    <a href="#" class="img-fade">
      <img src="http://placehold.it/125x149" width="125" height="149" />
    </a>
  </p>
  <h3><p class="img-fade"><a href="#">enter</a></p></h3>
</div>

CSS动画无法顺利运行Firefox

1 个答案: