-moz-animation-name: bird-slow;
-moz-animation-duration: 400ms;
-moz-animation-timing-function: steps(3,start);
-moz-animation-iteration-count: infinite;
@keyframes bird-slow{
0%{background-position: -0px;}
100%{background-position: -300%;}}
-moz-animation-duration: 400ms;
-moz-animation-timing-function: steps(3,start);
-moz-animation-iteration-count: infinite;
@keyframes bird-slow{
0%{background-position: -0px;}
100%{background-position: -300%;}}
2016-04-25
然后上代碼:
.birdFly{
animation: bird-slow 400ms steps(3,start) infinite;
-moz-animation: bird-slow 400ms steps(3,start) infinite;}
@keyframes bird-slow {
0%{background-position: 0px 0px;}
100%{background-position: -273px 0px;}}
.birdFly{
animation: bird-slow 400ms steps(3,start) infinite;
-moz-animation: bird-slow 400ms steps(3,start) infinite;}
@keyframes bird-slow {
0%{background-position: 0px 0px;}
100%{background-position: -273px 0px;}}
2016-04-25
首先要說明的是原來的題目有兩個問題:
問題1:background: url(http://img1.sycdn.imooc.com//55ade1700001b38302730071.png); ← 這里少了一個分號導(dǎo)致無法執(zhí)行。
問題2:實例寫法 0% {background-position-x: -0px} 這里的-x目的是為了標明后面px值代表X軸。但這個-x瀏覽器不支持。
所以換一種寫法0% {background-position: -0px 0px;} 注意這里加不加分號隨便,多個屬性時要加。
問題1:background: url(http://img1.sycdn.imooc.com//55ade1700001b38302730071.png); ← 這里少了一個分號導(dǎo)致無法執(zhí)行。
問題2:實例寫法 0% {background-position-x: -0px} 這里的-x目的是為了標明后面px值代表X軸。但這個-x瀏覽器不支持。
所以換一種寫法0% {background-position: -0px 0px;} 注意這里加不加分號隨便,多個屬性時要加。
2016-04-25