0

I'd like to animate the background-position of some div with css like this:

@keyframes wave{
    from{
        background-position: 80% center;
    }
    to{
        background-position: 160% center;
    }
}

This is a very simple animation, but what happens if the background-position in the y axis should change dinamicly? I know of background-position-x and y but...

Is there real support for the background-position-x and y rules? Or are they just phantoms today?

Vandervals
  • 5,774
  • 6
  • 48
  • 94

1 Answers1

0

Use background-position-x:

@keyframes wave{
    from{
        background-position-x: 80%;
    }to{
        background-position-x: 160%;
    }
}
Okku
  • 7,468
  • 4
  • 30
  • 43
  • What is the support for this? Because it is not working on my example – Vandervals Jun 08 '15 at 10:26
  • [Support](http://caniuse.com/#search=background-position) and [demo](https://jsfiddle.net/ilpo/j1n68o7k/) – Okku Jun 08 '15 at 10:43
  • That can't be the support as it is not working on firefox (though it is in chrome) – Vandervals Jun 08 '15 at 10:48
  • Looks like [Firefox doesn't fully support level 4 standard](http://stackoverflow.com/questions/13948617/backgroundpositionx-not-working-on-firefox), sorry about that. maybe you should consider using JS. – Okku Jun 08 '15 at 10:50