2017-02-22 43 views
1

Я реализовал анимацию панорамирования на моем изображении заголовка на следующей веб-странице, которая отлично работает на Safari & Chrome. У меня возникают проблемы с тем, чтобы он работал на firefox, я пробовал играть с -moz- и -webkit- свойствами, но, похоже, ничего не меняется.Header Image Panning с CSS - Firefox не работает

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

Любые идеи оценили!

ответ

0

Вы должны использовать Mozilla анимации синтаксис:

-moz-animation: panning 40s infinite linear; 
+0

Спасибо за ваш комментарий. Это то, что я предполагал, однако, я не вижу, что он работает в Firefox с добавленной строкой. Изображение все еще статично. Нужно ли мне включать что-нибудь еще? – Chris