这里的第一次海报。
我正在使用多媒体网站并使用大量动画。我正在使用CSS来处理动画，这些动画主要是div中的背景图像。这些动画在镀铬中起到很好的作用。这是一个例子。这些只是悬停事件，使按钮发光淡入淡出。请注意，javascript点击事件可以使关联的div淡入淡出。但是我的标题，统计面板和按钮都包含了作为动画加载的单个帧。
首先我设置正常状态：
#home{
background-image:url(../images/home_button_frames/home_button_frame_0.png);
width: 161px;
height: 145px;
float:left;
position:absolute;
background-repeat:no-repeat;
}
然后调用动画：
#home:hover{
width: 161px;
height: 115px;
/*webkit call for chrome and firefox*/
-webkit-animation-name: home;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
-moz-animation-name: home;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 0s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
-ms-animation-name: home;
-ms-animation-duration: 1s;
-ms-animation-timing-function: linear;
-ms-animation-delay: 0s;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: alternate;
-ms-animation-play-state: running;
-o-animation-name: home;
-o-animation-duration: 1s;
-o-animation-timing-function: linear;
-o-animation-delay: 0s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
/*call the namiation by name as described in @keyframes*/
animation-name: home;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
然后设置关键帧： / *设置按钮的不同关键帧状态* /
@-webkit-keyframes home{
0% { background-image: url(../images/home_button_frames/home_button_frame_0.png);}
25% { background-image: url(../images/home_button_frames/home_button_frame_1.png);}
50% { background-image: url(../images/home_button_frames/home_button_frame_2.png);}
100% { background-image: url(../images/home_button_frames/home_button_frame_3.png);}
}
@-moz-keyframes web{
0% { background-image: url(../images/web_button_frames/web_button_frame_0.png);}
25% { background-image: url(../images/web_button_frames/web_button_frame_1.png);}
50% { background-image: url(../images/web_button_frames/web_button_frame_2.png);}
100% { background-image: url(../images/web_button_frames/web_button_frame_3.png);}
}
@-ms-keyframes web{
0% { background-image: url(../images/web_button_frames/web_button_frame_0.png);}
25% { background-image: url(../images/web_button_frames/web_button_frame_1.png);}
50% { background-image: url(../images/web_button_frames/web_button_frame_2.png);}
100% { background-image: url(../images/web_button_frames/web_button_frame_3.png);}
}
@-o-keyframes web{
0% { background-image: url(../images/web_button_frames/web_button_frame_0.png);}
25% { background-image: url(../images/web_button_frames/web_button_frame_1.png);}
50% { background-image: url(../images/web_button_frames/web_button_frame_2.png);}
100% { background-image: url(../images/web_button_frames/web_button_frame_3.png);}
}
@keyframes home{
0% { background-image: url(../images/home_button_frames/home_button_frame_0.png);}
25% { background-image: url(../images/home_button_frames/home_button_frame_1.png);}
50% { background-image: url(../images/home_button_frames/home_button_frame_2.png);}
100% { background-image: url(../images/home_button_frames/home_button_frame_3.png);}
}
这一切在Chrome中运行得非常好。但是Firefox，Safari，IE ......什么都没有...我在firefox中测试后开始添加供应商前缀，并且看不到任何工作。如果每个人都使用铬，这将是非常棒的。
这是原型的链接。您可以看到使用Chrome查看时它应该如何工作。 prototype
提前感谢您提供的任何帮助。