如何创建一个ken burns效果 - 但是使用图像平移而不是缩放

时间:2016-06-27 05:44:04

标签: html css css3

我正在尝试为图像平移创建类似ken-burns的效果 - 并且已经看到了多个如何操作的示例。但我的结果代码不能在iOS上工作,并且在大屏幕的窗口上不稳定。

我正在使用背景位置 - 并希望使用transfrom - 这似乎在iOS浏览器上效果更好。

@-webkit-keyframes pan {
0%   { background-position: 0% 0%; }
25%  { background-position: 100% 100%; }
50%  { background-position: 100% 0%; }
75%  { background-position: 100% 100%; }
100% { background-position: 0 0; }
} 


@keyframes pan {
0%   { background-position: 0% 0%; }
25%  { background-position: 100% 100%; }
50%  { background-position: 100% 0%; }
75%  { background-position: 100% 100%; }
100% { background-position: 0 0; }
} 


.back {
  background: url(big.png) no-repeat;
  -webkit-animation: pan 80s ease-in 1s infinite;
          animation: pan 80s ease-in 1s infinite;
}

以上在一般浏览器中工作但是不稳定。我试图增加间隔等 - 但它也不适用于iOS。

如何将上述代码转换为使用转换或转换css-property?我知道它的性能和平滑性更好/更快。

感谢

0 个答案:

没有答案