                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /H5+JS+CSS3 实现圣诞情缘

动画没动？？

为什么第一个动画出不来啊

疯狂的你我他

2015-12-21

源自：H5+JS+CSS3 实现圣诞情缘 3-2

关注问题我要回答

1409

操作

收起

5 回答

常过无痕
2015-12-24

.birdFly {

/*写法1*/

-moz-animation: bird-slow 400ms steps(1,start) infinite;

/*写法2*/

-webkit-animation-name: bird-slow;

-webkit-animation-duration: 400ms;

-webkit-animation-timing-function: steps(3);

-webkit-animation-iteration-count: infinite;

}

@-webkit-keyframes bird-slow{

0%{

background-position:-0px 0px;

}

100%{

background-position:-273px 0px;

}

}

@-moz-keyframes bird-slow{

0%{

background-position:-182px 0px;

}

50%{

background-position:0px 0px;

}

75%{

background-position:-91px 0px;

}

100%{

background-position:-182px 0px;

}

}

0 回复有任何疑惑可以回复我~

#1

为什么火狐像你这样写就可以动了，求大神指教

2015-12-30 回复有任何疑惑可以回复我~

#2

常过无痕回复幕_女神

@-moz-keyframes 专门在火狐上使用 @-webkit-keyframes 在chrome等浏览器上使用

2015-12-30 回复有任何疑惑可以回复我~

#3

为什么@-moz-keyframes bird-slow要写那么详细？

2016-05-06 回复有任何疑惑可以回复我~

koinhug
2015-12-23

.birdFly { -webkit-animation: bird-slow 400ms steps(3,start) infinite;}

@-webkit-keyframes bird-slow {

0% {

background-position: -0px 0px;

}

100% {

background-position: -273px 0px;

}

}

0 回复有任何疑惑可以回复我~

GoFn
2015-12-22

@-webkit-keyframes bird-slow {

0% {

background-position: -0px 0px;

}

100% {

background-position: -273px 0px;

}

}

0 回复有任何疑惑可以回复我~

#1

我也是这样啊，但是还是没动

2015-12-22 回复有任何疑惑可以回复我~

echo_kinchao
2015-12-21

是不是没有引入文件

0 回复有任何疑惑可以回复我~

YouAreBeautiful
2015-12-21

因为没有引进文件css和JavaScript。

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

H5+JS+CSS3 实现圣诞情缘

参与学习 122011 人
解答问题 211 个

为圣诞节准备的H5+JS+CSS特效案例教程，实现静与动的结合

本课相似问答

1 回答css帧动画

3 回答动画效果出不来

4 回答深入理解CSS3 Animation 帧动画

1 回答动画效果设置了time=10000ms，可是为什么动画还是一瞬间完成了

1 回答小女孩选择3D球时的动画怎么做的

搜索更多本课相关问答

动画没动？？

我要回答关注问题

意见反馈帮助中心 APP下载