視差/ Ken燒傷效果，無需滾動

Question

好的，所以我在圖像上應用了視差/ Ken Burns效果，但是我不相信我使用的方法是那么好。 它在webkit瀏覽器上運行良好，但在firefox上不是很流暢，並且在IE中根本不起作用

很簡單，我在div中有一個背景圖片，並且在窗口加載時，我應用了一個名為pan的類來更改背景位置。

任何人對於實現此效果的方法都不會有任何想法，這將是平穩而平順的。

這是網站http://dev.touch-akl.com/xmas/

#banner{
  background-size: 100%;  
  background-attachment: fixed;
  background-repeat:no-repeat;
  background-position:0 0;
  padding-top:35.15625%;
  -o-transition-duration: 10s;
  -ms-transition-duration: 10s;
  -moz-transition-duration: 10s;
  -webkit-transition-duration: 10s;      
  }

有一次，我在.pan類上什至只有很小的比例，在chrome上看起來很棒，但是在Firefox上甚至更糟

  #banner.pan{
    background-position:0 160%;   
  }

Answer 1

這是ken burn effect的免費插件，您可以下載它

這是演示