在动画开始前隐藏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和firefox中有效，但在chrome中无效。

Answer 1

试试看：

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