在动画开始之前隐藏div

Question

我正在使用link中的现有主题。在页面的新加载中，您确实看到在页面动画实际开始之前可以看到一些div元素。

在style.css下，我们确实看到他们试图在动画开始之前阻止闪烁：

-webkit-animation-fill-mode: both;
animation-fill-mode: both;

这并没有真正解决问题。有没有办法在动画开始之前修复div元素的早期显示？

更新

@-webkit-keyframes fadeOut {
  0% {
    opacity:0;
    width:0;
  }
  1% {
    opacity:1;
  }
  100% {
    opacity:1;
    width:100px;
  }
}

@keyframes fadeOut {
  0% {
    opacity:0;
    width:0;
  }
  1% {
    opacity:1;
  }
  100% {
    opacity:1;
    width:100px;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

我发现问题出现在Chrome和移动设备上。

$(document).ready(function() {
   $('div#tp-caption').hide('slow');
});

这适用于safari＆amp; firefox但不是chrome。

Answer 1

试一试： -

@keyframes slidein {
  0% {
    opacity:0;
    width:0;
  }
  1% {
    opacity:1;
  }
  100% {
    opacity:1;
    width:100px;
  }
}