Animating background-position via keyframes not working on Webkit

Question

I cannot figure out why animations of background-position aren't working on my version of Chrome of Safari (Webkit Browsers). It's working fine on Firefox.

@keyframes animatedBackground {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 100% 0px; } 
}

.logo {
  width: 600px;
  height: 300px;
  background-image: url("http://placekitten.com/g/200/300");
  background-position: 0px 0px;

  -webkit-animation: animatedBackground 10s linear infinite;
  -moz-animation: animatedBackground 10s linear infinite;
  animation: animatedBackground 10s linear infinite; 
}

http://jsfiddle.net/LkeMitchll/kpBby/2/

Any help greatly appreciated!.

LM.

S.B. · Accepted Answer · 2014-04-08 16:39:38Z

4

You need to prefix @keyframes with the browser-specific prefix "-webkit" as well, see W3Schools

Try adding this to your CSS:

@-webkit-keyframes animatedBackground {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 100% 0px; } 
}

Fixed fiddle: http://jsfiddle.net/kpBby/3/

answered Apr 8, 2014 at 16:39

S.B.

2,9871 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Animating background-position via keyframes not working on Webkit

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related