background-position-x + 从右到左动画 + IE

Question

IE 中的动画问题。
我正在尝试连续平稳地左右移动背景。该代码适用于除 IE 之外的所有浏览器。
问题：从左到右显示问题。
请找到我添加的fiddle 。

function call1(){
	$('.container').animate({ 'background-position-x': '100%' }, 2000);
}

function animateBg(){
    call1();
    setTimeout(function(){
    	$('.container').animate({ 'background-position-x': '0%' }, 2000,function(){
			animateBg();
        });
        console.log("hii");
    });
}

animateBg();

.main{height:100%;}
.container{
    background:url('http://www.smartbygep.com/sites/default/files/SBG-home-page-banner.jpg')no-repeat top center;
    background-position-x:0%;   
    color:#333; /*-moz-transition: all .5s;
     -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);*/
    background-size:120% 100%;             
    background-color:#ccc;
    height:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="container">
        Sample text
    </div>
</div>

Answer 1

你必须使用

animate({ backgroundPosition: '0%' }

JSFiddle