Question

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

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

这很有效，但可怕的生涩。所以我正在考虑采用不同的方法。如果从一开始就使用类动画设置图像，情况会怎样？我不熟悉CSS3动画，只熟悉过渡，但目的是将一个永久类应用于一系列图像，这些图像一直让Ken烧平。

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

根据我的初始代码设置所有内容。

有什么想法吗？

非凡

编辑 -

好吧，我发现这看起来非常顺利。我看不到的是它有什么不同。他们正在使用网络工具包中的翻译功能，但是当我尝试它时，它只是跳了起来。看一看。 http://thing13.net/2010/02/css3-ken-burns-effect-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 plugin的代码进行快速破解。该插件可让您控制背景位置，如：

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

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

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

Answer 4

好伙计不会问我如何通过关键帧动画现在流畅。 http://jsfiddle.net/gxUhH/47/

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

有什么想法吗？

Ken Burns使用CSS 3 - 它有多难

4 个答案: