You don't need to use the background animate plugin if you just use separate values like this:

$('.pop').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

I guess it might be because it is expecting a single value?

taken from the animate page on jQuery:

Animation Properties and Values

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

Since jQuery doesn't support this out of the box, the best solution I have come across so far is to define your own CSS hooks in jQuery. Essentially, this means to define custom methods to get and set CSS values which also works with jQuery.animate().

There is already a very handy implementation for this on github: https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js

With this plugin in place, you can do something like this:

$('#demo1').hover(
  function() {
    $(this).stop().animate({
      backgroundPositionX: '100%',
      backgroundPositionY: '100%'
    });
  },
  function () {
    $(this).stop().animate({
      backgroundPositionX: '105%',
      backgroundPositionY: '105%'
    });
  }
);

For me, this worked on all browsers tested so far including IE6+.

I did put a quick demo online a while ago and you can rip it apart if you need further guidance.