Animation 使用CSS 3在框阴影中淡入？

我有一个脚本，一旦用户开始滚动，就会添加一个看起来非常漂亮的框阴影。但是，此长方体阴影会立即添加。我更喜欢它淡入使用CSS 3。我尝试过创建关键帧，在1秒内将不透明度从0更改为1，但这不起作用

以下是我正在使用的脚本：

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

CSS:

如何使长方体阴影淡入

---

注意：在这个问题中，我省略了供应商前缀，但它们在我的代码中。

我认为您只是有一两个拼写错误和语法错误，否则就没事了。两件事：

• 关闭jQuery中的两个函数
• 你的CSS提到了

  fadeIn

  ，但是jQuery已经

  淡入了
  

以下是新的、固定的jQuery代码：

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

$（函数（）{
$（窗口）。滚动（函数（）{
var top_offset=$（窗口）.scrollTop（）；
if（顶部偏移量）{
$（'.top\u head\u separator'）.addClass（'fixed-top fadeIn'）；//啊，人们错过的是简单的事情。谢谢你的帮助！
$(function() {
 $(window).scroll(function() {
    var top_offset = $(window).scrollTop();
    if (top_offset) {
      $('.top_head_separator').addClass('fixed-top fadeIn'); // <<<< "fadeIn"
    }
 }); // <<<< ADDED
});