前端 - 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”我就看不懂了，為什么這樣寫？

問題解答

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

animation-timing-function 中 steps 的用法參見這篇

steps 詳解

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

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

定義了一個變量：$spriteWidth

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

回答2：

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 end of the animation.

就是說你的動畫幀一開始就馬上跳到結束了，所以你看見的是keyframes里面5個幀一幀一幀地切換。如果沒有steps(1, start)，就會是一個平滑移動的效果。

2: -($spriteWidth * 12)應該是指把你這個動畫分成12幀，每一幀你的背景右移-($spriteWidth * 12)這個長度