Fiddle

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

查看小提琴

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

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

Fiddle

1 个答案: