当用户将鼠标悬停在导航栏上时,我的导航栏上有 CSS 动画。
问题是它们都只能在 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 或 Firefox 中设置动画。
作为记录,我正在运行最新的 Firefox (V22.0) 和 IE 10