Hello Friends这是我的css代码。
.create_animation{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url("animation/background.jpg"),url("animation/background.jpg");
background-size: 100px 100px,100% 100%;
background-repeat: no-repeat,repeat;
animation: myfirst 5s 2s forwards;
-moz-animation: myfirst 5s 2s forwards;
-webkit-animation: myfirst 5s 2s forwards;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
}
@-moz-keyframes myfirst
{
0% { -moz-opacity: 0.8; -moz-background-size: 100px 100px,100% 100%;}
25% { -moz-background: url("animation/vahan1.png"), url("animation/background_girl.jpg"); -moz-background-position: 20px 90px, 0px 0px; -moz-background-repeat: no-repeat,no-repeat; -moz-background-size: 100px 100px,100% 100%;}
50% { -moz-background: url("animation/vahan1.png"), url("animation/background_girl.jpg"); -moz-background-position: 40px 90px, 0px 0px; -moz-background-repeat: no-repeat,no-repeat; -moz-background-size: 100px 100px,100% 100%;}
100% { -moz-background: url("animation/vahan1.png"), url("animation/background_girl.jpg"); -moz-background-position: 60px 90px, 0px 0px; -moz-background-repeat: no-repeat,no-repeat; -moz-background-size: 100px 100px,100% 100%;}
}
这段代码不适用于firefox这个只能运行的chrome。
答案 0 :(得分:3)
background-image
在Firefox中无法制作动画。检查规范HERE
答案 1 :(得分:1)
摆脱-moz
关键帧中的每个myfirst
(但保留在-moz-keyframes
)。
例如:
@-moz-keyframes myfirst
{
0% { opacity: 0.8; background-size: 100px 100px,100% 100%;}
25% { background: url("animation/vahan1.png"), url("animation/background_girl.jpg"); background-position: 20px 90px, 0px 0px; background-repeat: no-repeat,no-repeat; background-size: 100px 100px,100% 100%;}
50% { background: url("animation/vahan1.png"), url("animation/background_girl.jpg"); background-position: 40px 90px, 0px 0px; background-repeat: no-repeat,no-repeat; background-size: 100px 100px,100% 100%;}
100% { background: url("animation/vahan1.png"), url("animation/background_girl.jpg"); background-position: 60px 90px, 0px 0px; background-repeat: no-repeat,no-repeat; background-size: 100px 100px,100% 100%;}
}
但是,background-image
在Firefox中尚无动画效果。
答案 2 :(得分:0)
此链接将引导您清楚地通过它:Keyframe Animation Syntax