jquery - 背景图像/大小上的 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;
}

Answer 1

这真的很老了，但我也一直在努力解决这个问题，直到我找到了一个很好的实现方法scale

看看小提琴

http://jsfiddle.net/YEvCU/6/

我用transform: scale(3)然后动画它transform: scale(1)

HTML

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

JavaScript

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

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

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

CSS：

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