jquery - background-image/size の CSS トランジションが非常にでこぼこしています。どうすればスムーズにできますか?

Question

ゲームの紹介ムービーのようなものを作っているのですが、CSS で作れたらいいなと思いました。アニメーションの一部が非常にでこぼこしていますが、その理由はわかりません。transition-timing-functionアニメーションのさまざまな部分を使用することによって、滑らかになったり、でこぼこになったりします。一部のパーツが非常にスムーズに移動し、その後 (同じ遷移中に) 突然カクカクし始める理由がわかりません。

私は何か間違ったことをしていますか？これを行うより良い方法はありますか？

フィドル

HTML

  var screen1 = $('#screen1');
  var screen2 = $('#screen2');

JavaScript

  screen1.css({
      'background': 'url(http://uniquenaturewallpapers.com/wp-content/uploads/2013/01/3d-underwater-Wallpaper.jpg)',
          'background-position': 'left center',
          'background-size': '100%',
          '-webkit-filter': 'none'
  });
  screen2.css({
      'opacity': '0'
  });

  setTimeout(function () {
      screen2.css({
          'opacity': '1'
      });
  }, 20000);


<div id="screen1"></div>
<div id="screen2"></div>

CSS:

#screen1, #screen2 {
    background: black;
    background-size: 150%;
    background-position: 100% 50%;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: 30s ease-in, -webkit-filter 20s ease-in 8s;
}