我正在尝试为图像平移创建类似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?我知道它的性能和平滑性更好/更快。
感谢