كس 3 الرسوم المتحركة يعمل في كروم لا فايرفوكس

Question

أواجه مشكلة في معرفة لماذا يعمل هذا في كروم ، ولكن ليس في فايرفوكس.

الرمز الخاص بي:

#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}
}

ما هي المشكلة في ذلك?

Answer 1

لماذا لديك مجموعتين من المواقف من background-position مثل هذا: -100% 20px, center top?

أعتقد أنه يجب أن يكون:

@-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;
    }
}