CSS Keyframes Animation Working locally, but not on my site

Question

I have the following code in use on a Wordpress installation, and it's not working on my live site, but functions fine locally on mamp. All of the assets are showing up properly in the browser. It's just not working. I am hoping that somebody out knows what's might be wrong with my code.

Is there anything that can interfere with CSS keyframe animations?

@keyframes animatedBackground {
  from { background-position: -405 0; }/*1048+ - Default Styles*/
  to { background-position: 1090 0; }/*1048+ - Default Styles*/
}
@-webkit-keyframes animatedBackground /* Safari and Chrome */
{
  from { background-position: -405 0; }/*1048+ - Default Styles*/
  to { background-position: 1090 0; }/*1048+ - Default Styles*/
}
.animation {
  -webkit-animation-name: animatedBackground;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 12s;
  -webkit-animation-play-state: running;
  animation-name: animatedBackground;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-duration: 12s;
  animation-play-state: running;
}

Answer 1

px is missing in background position

@keyframes animatedBackground {
  from { background-position: -405px 0; }/*1048+ - Default Styles*/
  to { background-position: 1090px 0; }/*1048+ - Default Styles*/
}
@-webkit-keyframes animatedBackground /* Safari and Chrome */
{
  from { background-position: -405px 0; }/*1048+ - Default Styles*/
  to { background-position: 1090px 0; }/*1048+ - Default Styles*/
}

Hope you are testing the page in Chrome.