問(wèn)題描述

第一種：

@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;} } /*動(dòng)畫(huà)切換的方式是一幀一幀的改變*/-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”我就看不懂了，為什么這樣寫(xiě)？

問(wèn)題解答

回答1：1. 什么叫“一幀一幀的改變”， steps(1, start);該如何理解？

animation-timing-function 中 steps 的用法參見(jiàn)這篇

steps 詳解

2. 第二種直接“-($spriteWidth * 12) 0”我就看不懂了，為什么這樣寫(xiě)？

首先顯然這是 Scss 文件（一種 css 預(yù)編譯文件）

定義了一個(gè)變量：$spriteWidth

-($spriteWidth * 12) 這句就是一個(gè)運(yùn)算呀 => -(140px*12)

回答2：

1: steps(1, start)我在MDN上剛好看到一個(gè)解釋

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.

就是說(shuō)你的動(dòng)畫(huà)幀一開(kāi)始就馬上跳到結(jié)束了，所以你看見(jiàn)的是keyframes里面5個(gè)幀一幀一幀地切換。如果沒(méi)有steps(1, start)，就會(huì)是一個(gè)平滑移動(dòng)的效果。

2: -($spriteWidth * 12)應(yīng)該是指把你這個(gè)動(dòng)畫(huà)分成12幀，每一幀你的背景右移-($spriteWidth * 12)這個(gè)長(zhǎng)度