CSS Keyframes Slide not working on Background image

Question

Using the second answer found here. I combined my images into a sprite and then updated my CSS to reflect the keyframes element like in the example provided. The sprite image (castle) shows up but the slide effect does not take place? What am I missing?

Sample URL, center element on home page: http://216.157.26.175/cookiedouglas/

Here is my CSS:

.agentpress-pro-cookie  .home-featured .widget {
    /* background-color: rgba(255, 255, 255, 0.8); */
    background: url("http://216.157.26.175/cookiedouglas/wp-content/uploads/sites/58/2015/05/fort-myers-homes-for-sale.jpg");
    opacity: 0.95;
        content: '';
    /*    position: absolute;
        width: 400%;
        height: 100%; */
        z-index: -1;
     /*   background: url(http://placekitten.com/500/500/);  Image is 500px by 500px, but only 200px by 50px is showing. */
        animation: slide 3s infinite;
    }
    @keyframes slide {
        20% {
            left: 0;
        }
        40%, 60% {
            left: -50%;
        }
        80%, 100% {
            left: -100%;
        }
    }

Answer 1

Use browser (vendor) specific prefixes.

Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.

CSS3 animation is one of those features. It has partial support across different browsers. Browser support for CSS3 animations can be checked here.

As evident from the above link, to make the animation work on browsers other than IE and Firefox, you meed the -webkit- prefix.

Also, CSS left propery works only with absolutely positioned elements.

So you should try something like this (read added comments in snippet for explanation):

/*visible portion of the larger 5120x680 pixel image*/
.widget {
  width: 1024px;
  height: 680px;
  position: relative;
  overflow: hidden;
  border: 1px solid black;
}

.widget:before {
  content: '';
  position: absolute;
  /*needed for CSS left property to work*/
  width: 5120px;
  height: 680px;
  z-index: -1;
  /*ExampleImageSprite.jpg is a 5120x680 pixel image which is a combination of 5 individual 1024x680 pixel images*/
  background: url("https://dl.dropboxusercontent.com/u/192824325/00_sandbox/30150865/ExampleImageSprite.jpg");
  -webkit-animation: slide 10s infinite;
  animation: slide 10s infinite;
}

@-webkit-keyframes slide {
  0% {
    left: 0px;
  }
  20% {
    left: -1024px;
  }
  40% {
    left: -2048px;
  }
  60% {
    left: -3072px;
  }
  80% {
    left: -4096px;
  }
  100% {
    left: -5120px;
  }
}
@keyframes slide {
  0% {
    left: 0px;
  }
  20% {
    left: -1024px;
  }
  40% {
    left: -2048px;
  }
  60% {
    left: -3072px;
  }
  80% {
    left: -4096px;
  }
  100% {
    left: -5120px;
  }
}

<div class=widget></div>