0

i am trying to create a very simple animation sequence base on this little article (http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps) but nothing seems to animate.

my css code is the following 

.mainContent {
    width:960px;
    height:388px;
    background:url('http://www.wearewebstars.dk/codepen/img/s1.png') repeat-x 0 0;
    background-color:#58e9a3;
    -webkit-animation: play 1s linear infinite;
    -moz-animation: play 1s linear infinite;
    -ms-animation: play 1s linear infinite;
    animation: play 1s linear infinite;
}

@keyframes play {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 0px -190px;
    }
    100% {
        background-position: 0px -300px;
    }
}

An example of my code (css+html) can be found here http://jsfiddle.net/atragan/pqg2yrpL/

benomatis
  • 5,536
  • 7
  • 36
  • 59
Andreas Traganidas
  • 497
  • 1
  • 6
  • 13
  • possible duplicate of [Why doesn't \[CSS feature\] work in \[browser\] but works in others?](http://stackoverflow.com/questions/25110510/why-doesnt-css-feature-work-in-browser-but-works-in-others) – Harry Dec 22 '14 at 16:34
  • 1
    http://caniuse.com/#feat=css-animation – Jonathan Dec 22 '14 at 16:35

1 Answers1

2

Just also adding prefix to your keyframes like this:

@-webkit-keyframes play {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 0px -190px;
    }
    100% {
        background-position: 0px -300px;
    }
}

@-moz-keyframes play {
    ...
}

@-o-keyframes play {
    ...
}

@keyframes play {
    ...
}

DEMO : http://jsfiddle.net/pqg2yrpL/1/

Joffrey Maheo
  • 2,919
  • 2
  • 20
  • 23