第一种:
@keyframes slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
/*动画切换的方式是一帧一帧的改变*/
-webkit-animation-timing-function: steps(1, start);
第二种:
$spriteWidth: 140px; // 精灵宽度
@keyframes run {
0% {
background-position: 0 0;
}
100% {
background-position: -($spriteWidth * 12) 0; // 12帧
}
}
#sprite {
width: $spriteWidth;
height: 144px;
background: url("../images/sprite.png") 0 0 no-repeat;
animation: run 0.6s steps(12) infinite;
}
1,什么叫“一帧一帧的改变”, steps(1, start);该如何理解?
2,第二种直接“-($spriteWidth * 12) 0”我就看不懂了,为什么这样写?
PHP中文网2017-04-17 11:37:36
animation-timing-function 中 steps 的用法請參考這篇
steps 詳解
首先顯然這是 Scss 檔案(一種 css 預編譯檔)
定義了一個變數:$spriteWidth
-($spriteWidth * 12)
這句就是一個運算呀 => -(140px*12)
阿神2017-04-17 11:37:36
1: steps(1, start)
我在MDN上剛好看到一個解釋
,就會是一個平滑移動的效果。This keyword represents the timing function steps(1, start). Using this timing function, the animation jumps immediately to the end state and stay in that position until the endo>
就是說你的動畫影格一開始就馬上跳到結束了,所以你看見的是keyframes裡面5個幀一幀地切換。如果沒有
steps(1, start)
2:
這個長度-($spriteWidth * 12)