title: Fade in Box Shadow using CSS 3?
body: <p>I have a script that as soon as the user starts to scroll a box shadow is added that looks very nice. However, this box shadow is added instantly. I would prefer that it fade in using CSS 3. I have tried creating keyframes that change the opacity from 0 - 1 over 1 second but that doesn't work. </p>
  
  <p>Here is the script I am using: </p>
  
  <pre><code>$(function() {
   $(window).scroll(function() {
      var top_offset = $(window).scrollTop();
      if (top_offset) {
        $('.top_head_separator').addClass('fixed-top fade-in');
    }
  });
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>How do I have the box shadow fade in? </p>
  
  <p>Note: I omitted vendor prefixes in this question but they are in my code.</p>