第一种:
@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”我就看不懂了,为什么这样写?
1. What is "frame-by-frame change", how to understand steps(1, start);?
For the usage of steps in animation-timing-function, please refer to this article
Detailed explanation of steps
2. I can’t understand the second direct method of “-($spriteWidth * 12) 0”. Why is it written like this?
First of all obviously this is a Scss file (a css precompiled file)
defines a variable: $spriteWidth
-($spriteWidth * 12)
This sentence is an operation => -(140px*12)1:
steps(1, start)
I happened to see an explanation on MDNThat is to say, your animation frame jumps to the end as soon as it starts, so what you see is the 5 frames in the keyframes switching frame by frame. If there is no
steps(1, start)
, it will be a smooth moving effect.2:
-($spriteWidth * 12)
It should mean dividing your animation into 12 frames, and moving your background to the right in each frame-($spriteWidth * 12)
this length