使用CSS 3盒影子渐渐？(Fade in Box Shadow using CSS 3?)

我有一个脚本，一旦用户开始滚动框添加阴影，看起来非常漂亮。 然而，这个盒子的影子瞬间增加。 我宁愿它淡入使用CSS 3.我试图创建一个从0更改为不透明度关键帧 - 1 1秒以上，但不起作用。

下面是我使用的脚本：

$(function() {
 $(window).scroll(function() {
    var top_offset = $(window).scrollTop();
    if (top_offset) {
      $('.top_head_separator').addClass('fixed-top fade-in');
  }
});

CSS：

.fixed-top {
  background:#FFFFFF;
  box-shadow: 0 7px 15px 4px rgba(0,0,0,0.38);
  height: 90px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;

}
@keyframes fadeIn {
  0% {opacity: 0;}  
  100% {opacity: 1;}
}

.fadeIn {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

如何在盒子阴影淡出？

注：我在这个问题上省略供应商前缀，但他们是在我的代码。

Answer 1:

我认为你只是有一个拼写错误和语法错误或两个，否则，你的罚款。 两件事情：

• 在您的jQuery关闭两种功能。
• 你的CSS提到fadeIn ，但jQuery的已经fade-in

这里是新的，固定的jQuery代码：

$(function() {
 $(window).scroll(function() {
    var top_offset = $(window).scrollTop();
    if (top_offset) {
      $('.top_head_separator').addClass('fixed-top fadeIn'); // <<<< "fadeIn"
    }
 }); // <<<< ADDED
});

见这-webkit-演示的工作实例。

文章来源: Fade in Box Shadow using CSS 3?