keyframe animation with CSS - not working in Chrome

Question

I have created a jsfiddle with the code which I'm having trouble getting working in Chrome (version 48.0.2564.116) but works in IE (version 11.0.9600.17631). The animation of the background image works fine in IE, but no animation appears with Chrome.

Thanks in advance for any help.

The code is as follows:

#backgroundOnly {
background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%);
background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%); /* IE 10+ */
}

#backgroundAnimation {
    width: 200px; 
    height: 100px;
    background: red;
    position :relative;
    animation: spotLight 5s linear 0s infinite alternate;
    -webkit-animation: spotLight 5s infinite alternate linear 0s  ;
    background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%); Safari /*5.1+, Mobile Safari, Chrome10+ */
}

@keyframes spotLight { /* IE 10+ */
    from {background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 75%, #CCC49F 100%);}
    to   {background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 20%, #CCC49F 100%);}
}

@-webkit-keyframes spotLight { /*Safari 5.1+, Mobile Safari, Chrome10+ */
    from {background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 75%, #CCC49F 100%);}
    to   {background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 20%, #CCC49F 100%);}
}

<!DOCTYPE html>

<body>
<div id="backgroundOnly">
    <p>background only</p>
    <div id="backgroundAnimation">
        <p>background animation</p>
    </div>
</div>
</body>

score 0 · Answer 1 · edited May 23 '17 at 12:15

https://jsfiddle.net/b4192ynm/1/

Quite some typo and errors in your code.

#backgroundOnly {
  background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 50%, #ccc49f 100%);
  background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 50%, #ccc49f 100%);
}

#backgroundAnimation {
  width: 200px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: spotLight 2s linear 0s infinite alternate;
  animation: spotLight 2s linear 0s infinite alternate;
}

@-webkit-keyframes spotLight {
  from {
    background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 75%, #ccc49f 100%);
  }
  to {
    background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 20%, #ccc49f 100%);
  }
}

@keyframes spotLight {
  from {
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 75%, #ccc49f 100%);
  }
  to {
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 20%, #ccc49f 100%);
  }
}

So now at least they flick from one side to the other in Chrome. If you mean they didn't nicely gradually change, then this question is a duplicate of this question. As you can read there, at this moment only IE supports this.

keyframe animation with CSS - not working in Chrome

1 Answers1