搜尋

首頁  >  問答  >  主體

前端 - 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 天前484

全部回覆(2)我來回復

  • PHP中文网

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

    1. 什麼叫“一幀一幀的改變”, steps(1, start);該如何理解?

    • animation-timing-function 中 steps 的用法請參考這篇

    • steps 詳解

    2. 第二種直接「-($spriteWidth * 12) 0」我就看不懂了,為什麼這樣寫?

    • 首先顯然這是 Scss 檔案(一種 css 預編譯檔)

    • 定義了一個變數:$spriteWidth

    • -($spriteWidth * 12) 這句就是一個運算呀 => -(140px*12)

    回覆
    0
  • 阿神

    阿神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:

    應該是指把你這個動畫分成12幀,每一幀你的背景右移

    這個長度-($spriteWidth * 12)

    回覆
    0
  • 取消回覆