CODEWITHSUNDEEP
htmlcssanimation
DJC
DJC

Reputation: 1173

css animation prefix errors

I have a keyframes animation that works in chrome, but not in IE or Firefox.

I have tried using the -moz-animation prefix with @-moz-keyframes prefix, with one and not the other, and tried using neither, all the while including the standard non prefixed statements at the end of each css line.

However, no luck at all. Is there an error somewhere else in the code? I am using up to date browser verions.

HTML

   <div class="runner"></div>

CSS

    .runner {
        border-radius: 40pt ; 
        -webkit-box-shadow: 0 0 10pt grey ; 
        -moz-box-shadow: 0 0 10pt grey ;
        box-shadow: 0 0 10pt grey ; 
        width:494px ; 
        height: 415.8px ; 
        position: absolute ; top:0 ; left: 0 ; 
        background: url(img/pic1.png) ;
       -webkit-animation: slideshow 20s infinite 2s ; animation: slideshow 20s infinite 2s
    }

    @-moz-keyframes slideshow {
    20% {background:url(pic1.png)}
    25%, 45% {background:url(img/pic2.png)}
    50%, 70% {background:url(img/pic3.png)}
    75%, 95% {background:url(img/pic4.png)}
    }

    @-webkit-keyframes slideshow {
    20% {background:url(img/pic1.png)}
    25%, 45% {background:url(img/pic2.png)}
    50%, 70% {background:url(img/pic3.png)}
    75%, 95% {background:url(img/pic4.png)}
    }

    @keyframes slideshow {
    20% {background:url(img/pic1.png)}
    25%, 45% {background:url(img/pic2.png)}
    50%, 70% {background:url(img/pic3.png)}
    75%, 95% {background:url(img/pic4.png)}
    }

Upvotes: 0

Views: 132

Answers (1)

Arjun
Arjun

Reputation: 1439

have you use -moz-animation in your css. I think that is not in your css, and for IE it works in IE 10.

Upvotes: 1

Related Questions