Поддержка анимации CSS в Firefox и IE?

У меня есть анимированные CSS на моей панели навигации, когда пользователь на них нависает.Поддержка анимации CSS в Firefox и IE?

Проблема в том, что все они работают только в Chrome. У всех есть правильные расширения, но ничего не происходит?

Пример одной кнопки:

#WhatsWhatButton:hover 
{ 
-webkit-animation-name: sway; 
-webkit-animation-duration: 1.5s; 
-webkit-animation-fill-mode: both; 
-moz-animation-name: sway; 
-moz-animation-duration: 1.5s; 
-moz-animation-fill-mode: both; 
-ms-animation-name: sway; 
-ms-animation-duration: 1.5s; 
-ms-animation-fill-mode: both; 
-o-animation-name: sway; 
-o-animation-duration: 1.5s; 
-o-animation-fill-mode: both; 
animation-name: sway; 
animation-duration: 1s; 
animation-fill-mode: both; 
} 

@-webkit-keyframes sway 
{ 
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;} 
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;} 
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
} 

@-moz-keyframes sway 
{ 
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;} 
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;} 
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
} 

@-ms-keyframes sway 
{ 
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;} 
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;} 
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
} 

@-o-keyframes sway 
{ 
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;} 
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;} 
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
} 

@keyframes sway 
{ 
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;} 
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;} 
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;} 
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;} 
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;} 
}

Как вы можете видеть, все ключевые кадры имеют свои расширения, а также инициировал его изнутри #WhatsWhatsButton:hover

Но она до сих пор не анимировать в IE или Fire Fox.

Для записи, я бег последнего Firefox (V22.0) и IE 10

источник

2013-07-02 Matt Meadows

Это должно помочь: http://stackoverflow.com/questions/10355411/ie10-css-animation-not-working – Tbi45

Исходя из этого, IE должен использовать нерасширение @keyframe. Так что это не то, что это проблема –

. Я также хотел бы добавить, что у меня есть полная анимация CSS3 на странице, на которой также есть кнопки навигации, и это отлично работает. Я просто не понимаю, почему его не работает на nav hovers –

Firefox и IE10 как поддержка CSS Animations (теперь даже без префикса, так что нет никакой реальной необходимости использовать префикс -ms- для анимаций, потому что в них нет загруженной версии IE, а -moz - вероятно, также можно удалить, поскольку Firefox не нуждается в префиксе с версии 16). Но свойство «background-image» помечено в spec как «не animatable». Вот почему большинство браузеров не могут анимировать (перетаскивать) их через CSS, только у Chrome есть эта нестандартная функция. Дополнительная информация по теме: CSS3 transition of background-image for Firefox not working

В качестве обходного пути я предлагаю создать 2 слоя фона (например, элемент и псевдоэлемент) и анимировать непрозрачность верхнего слоя.

источник

2013-07-02 16:07:00

Хмм, я не думаю, если бы вы знали, но думаете ли вы, что можно будет использовать modernizr для эмуляции анимаций для IE и FF? –

Поддержка анимации CSS в Firefox и IE?

ответ

Смежные вопросы