title: CSS filters load very slow when applied dynamically to multiple elements
body: <p>I'm trying to apply a grayscale filter to elements to bring them out of focus when manipulating data.</p>
  
  <p>I'm just applying a class to all the relevant elements but there's a very noticeable hang when loading the CSS filter onto the elements.</p>
  
  <p>Any ideas for making this faster and lag-free? I'd like to retain the grayscale effect but it's not responsive enough. I've tried this with different CSS like <code>opacity: 0.4;</code> to compare the speed and it's definitely the CSS filter that is causing the problem, not the javascript.</p>
  
  <p>Here's the relevant JS/CSS</p>
  
  <p>JS:</p>
  
  <pre><code>$("#users li").draggable({
      revert: function(socketObj) {
          if (socketObj === false) {
              // Drop was rejected, revert the helper.
              $(".fc-event").removeClass("greyscale");
              return true;
          } else {
              // Drop was accepted, don't revert.
              return false;
          }
      },
      start: function( event, ui ) {
          $(".fc-event").each(function(index, element) {
              if(/* some condition is met */) {
                  $(element).addClass("greyscale");
              }
          });
      }
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.greyscale {
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      filter: grayscale(100%);
  }
  </code></pre>