CSS-анимация работает в Chrome и Safari, но не в Firefox и IE

Question

Я использую анимацию, показанную на моей странице. Он работает для Chrome и Safari (webkit-Browser), но не для Firefox (moz), а также не для Internet Explorer. я не знаю, почему, но вот мой код:

#Area { 
    -webkit-animation: WriteText 2s; 
    -moz-animation: WriteText 2s; 
    animation: WriteText 2s; 
} 

@-webkit-keyframes WriteText { 
    0% { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; } 
    5% { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1; } 
........ 
    100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; } 
} 

@-moz-keyframes WriteText { 
    0% { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; } 
    5% { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1; } 
........ 
    100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; } 
} 

@keyframes WriteText { 
    0% { background: #fff url('../media/header/header00.jpg'); background-size: 1000px 263px; opacity: 1; } 
    5% { background: #fff url('../media/header/header01.jpg'); background-size: 1000px 263px; opacity: 1; } 
........ 
    100% { background: #fff url('../media/header/header.jpg'); background-size: 1000px 263px; opacity: 1; } 
} 

Другие вещи из CSS прекрасно работает в любом браузере, содержание браузерных конкретных разделов одинакова для анимации, так что я не» я знаю, почему это не работает.

я уже пробовал писать так:

#Area { 
    -webkit-animation-name: WriteText; 
    -webkit-animation-duration: 2s; 
    -moz-animation-name: WriteText; 
    -moz-animation-duration: 2s; 
    animation-name: WriteText; 
    animation-duration: 2s; 
} 

, но это не помогает мне.

Answer 1

Глядя на файл CSS по ссылке вы предоставили, вам не хватает запятой после-анимации-имя -moz и -moz-анимация-продолжительность:

#NavigationArea .ImgAni { 
position: relative; 
width: 1000px; 
height: 263px; 
background: #E0FFFF url('../media/header/header.jpg'); 
opacity: 1; 
background-size: 1000px 263px; 
-webkit-animation-name:WriteText; 
-webkit-animation-delay: 1s; 
-webkit-animation-duration: 3s; 
-moz-animation-name: WriteText /* missing semicolon here */ 
-moz-animation-delay: 1s; 
-moz-animation-duration: 3s /* missing semicolon here */ 
animation-name:WriteText; 
animation-delay: 1s; 
animation-duration: 3s; 
} 

Это вызывает не-Webkit браузеров не выберите название анимации. Попробуйте добавить эти точки с запятой и отчитаться. Или вы могли бы просто удалить эти анимационные строки с префиксом moz, так как это единственные недостающие точки с запятой, и Firefox даже не использует их. Просто -webkit-анимация и анимация должны делать.