search

Home  >  Q&A  >  body text

前端 - css3动画怎样对帧的理解?

第一种:

@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中文网PHP中文网2863 days ago487

reply all(2)I'll reply

  • PHP中文网

    PHP中文网2017-04-17 11:37:36

    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)

    reply
    0
  • 阿神

    阿神2017-04-17 11:37:36

    1: steps(1, start)I happened to see an explanation on 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 end of the animation.

    That 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

    reply
    0
  • Cancelreply