jquery - 要素の外側から内側へ背景位置をアニメーション化する

Question

要素の OUTSIDE から INSIDE への背景画像のアニメーション化に問題があります。

次のコードは、画像が常に要素の境界内にある限り、Chrome で機能します。

<script type="text/javascript">
$(document).ready(function() {

    $('.title').css({backgroundPosition: '100% 100px'}).animate({
          'background-position-x': '100%',
          'background-position-y': '50%'
        }, 1000, 'linear');
});
</script>

<style type="text/css">
.title {
    width: 100%;
    height: 400px;
    background: rgba(0,0,0,0.6) url(https://www.google.co.uk/images/srpr/logo3w.png) no-repeat;
}
</style>

<div class="title"></div>​

...しかし、画像が要素の境界の外で始まると、画像が飛び跳ねて期待どおりに動作しません。

これがJSFIDDLEです

上記のコードは FF ではまったく機能しないので、私が見つけていない根本的なエラーがコードにあるはずです。

どんな助けでも大歓迎です。