Question

I am having trouble figuring out why this works in Chrome, but not in Firefox.

My code:

#header3{
    background: url(/images/mynecraft/clouds3.png) repeat-x center 20px;
    -webkit-animation-name:cloud-crawl-header3;
    -webkit-animation-duration: 120s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:cloud-crawl-header3;
    -moz-animation-duration:120s;
    -moz-animation-timing-function:linear;
    -moz-animation-iteration-count:infinite;
}
@-webkit-keyframes cloud-crawl-header3{
        from{background-position: -100% 20px, center top}to{background-position: 100% 20px, center top}
}
@-moz-keyframes cloud-crawl-header3{
        from{background-position: -100% 20px, center top}to{background-position: 100% 20px, center top}
}

What’s the problem with it?

Answer 1

Why do you have two sets of positions of background-position like this: -100% 20px, center top?

I think it should be:

@-webkit-keyframes cloud-crawl-header3 {
    from {
        background-position: -100% 20px;
    }
    to { 
        background-position: 100% 20px;
    }
}

@-moz-keyframes cloud-crawl-header3 {
    from {
        background-position: -100% 20px;
    }
    to { 
        background-position: 100% 20px;
    }
}