jquery - 背景图像/尺寸上的 CSS 过渡非常颠簸，我怎样才能让它更平滑？

Question

我正在为一款游戏制作介绍电影，我认为用 CSS 来制作它会很好。动画的某些部分确实很颠簸，但我不确定为什么。根据使用不同的 transition-timing-function 动画的不同部分变得平滑或颠簸。我不明白为什么有些部分移动非常平滑然后突然开始卡顿(在相同的过渡期间)。

我做错了什么吗？有更好的方法吗？

Fiddle

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的好方法

检查 fiddle

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;
}