標題圖像使用CSS進行平移 - Firefox不起作用

Question

我在以下網頁的標題圖像上實施了平移動畫，該功能在Safari瀏覽器& Chrome上效果很好。我有問題得到它在Firefox上工作，我曾嘗試玩-moz-和-webkit-屬性，但似乎沒有任何改變。

http://osealeisure.com/wordpress/osea/about/

CSS

@keyframes panning { 
    0% { 
    background-position: 0% 0%; 
    } 
    25% { 
    background-position: 100% 100%; 
    } 
    50% { 
    background-position: 100% 0%; 
    } 
    75% { 
    background-position: 0 100%; 
    } 
    200% { 
    background-position: 0 0; 
    } 
} 

@-webkit-keyframes panning { 
    0% { 
    background-position: 0% 0%; 
    } 
    25% { 
    background-position: 100% 100%; 
    } 
    50% { 
    background-position: 100% 0%; 
    } 
    75% { 
    background-position: 0 100%; 
    } 
    200% { 
    background-position: 0 0; 
    } 
} 

@-moz-keyframes panning { 
    0% { 
    background-position: 0% 0%; 
    } 
    25% { 
    background-position: 100% 100%; 
    } 
    50% { 
    background-position: 100% 0%; 
    } 
    75% { 
    background-position: 0 100%; 
    } 
    200% { 
    background-position: 0 0; 
    } 
} 

.vc_custom_1487756740420 { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    background-size: 100%!important; 
    animation: panning 40s infinite linear; 
    -moz-animation: panning 40s infinite linear; 
    -webkit-animation: panning 40s infinite linear; 
} 

任何想法表示讚賞！

Answer 1

你將不得不使用Mozilla動畫語法：

-moz-animation: panning 40s infinite linear;