Ken Burns 与 CSS 3 - 它有多难

Question

使用 CSS3 我认为基于 CSS 的 Ken Burns 效果没有理由不起作用。我的第一次尝试涉及使用 Jquery 将新类添加到背景图像。

.flare1 {
    background-position:-50.1px -50.1px !important;
    -webkit-transition: all 5s ease-in-out;
}
function gallery() {
    $('.cornerimg').addClass('flare1');
}

这有效，但非常不稳定。所以我正在考虑采用不同的方法。如果从一开始就给图像设置一个类动画会怎么样？我不熟悉 CSS3 动画，只熟悉过渡，但目的是将永久类应用于一系列图像，使它们始终顺利地呈现给 Ken Burn。

我为任何想尝试的人准备了一个可爱的试验场。 http://jsfiddle.net/gxUhH/10/

全部根据我的初始代码进行设置。

有什么想法吗？

很棒的

编辑——

好吧，我发现这看起来非常顺利。我看不出它有什么不同。他们正在使用 web-kit 中的翻译功能，但当我尝试时，它就跳了。看看吧。 http://thing13.net/2010/02/css3-ken-烧伤效果-2/

Answer 1

您的动作很不稳定，因为您一次只能将背景移动至少 1 个像素。您可以通过将 background-position 设置为 10px 并将过渡时间设置为 10s Linear 来测试这一点，您会看到图像每秒移动一次像素。

一个像素听起来可能不多，但当你缓慢移动时，它是相当明显的。

我的解决方案是更快地移动图像。至少每秒 20 像素是流畅运动的最低速度。

遗憾的是，在浏览器实现硬件加速之前，您可能无法对背景图像进行实时子像素重采样。

Answer 2

你可以为你的 CSS 做这样的事情。 （根据需要自定义）

#gallery .imageitem {
    width:680px;
    height:380px;
    overflow:hidden;
    background-position:0px 0px;
    background-repeat:no-repeat;
}
.flare1 {
    -moz-animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    -moz-animation-name: slide;
    -webkit-animation-name: slide;  
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
}

@-moz-keyframes slide {
  from {
    background-position: 0px;
  }

  to {
    background-position: -100px;
  }
}

@-webkit-keyframes slide {

  from {
    background-position: 0px;
  }

  to {
    background-position: -100px;
  }
}
.cornerimg {
    width:680px;
    height:380px;
}

http://jsfiddle.net/gxUhH/23/

Answer 3

我尝试使用 protofunc 中的代码进行快速破解，该代码使用 backgroundPosition jQuery 插件。该插件可让您控制背景位置，例如：

$(this).animate({'background-position': '500px 150px'})

我将一个巨大的 JPG 作为背景图像放在一个小 div 上。然后，可以通过单击触发动画，或通过回调事件堆叠动画，以及 jQuery 可以执行的所有常用操作。它在我的机器上的 Chrome 中运行得非常流畅。

重新阅读你的问题后，它不使用 CSS3...所以不是一个非常有用的答案！ ：P

Answer 4

好吧，伙计们不会问我怎么做，但通过关键帧动画现在很流畅。
http://jsfiddle.net/gxUhH/47/

不过只有一个问题。当人们在触摸屏设备上滚动时，页面会变得不稳定。我认为我们需要在滚动时暂停它，然后在滚动完成后再次播放。

有什么想法吗？