前端 - css3動(dòng)畫(huà)怎樣對(duì)幀的理解?
問(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)度
相關(guān)文章:
1. javascript - 按鈕鏈接到另一個(gè)網(wǎng)址 怎么通過(guò)百度統(tǒng)計(jì)計(jì)算按鈕的點(diǎn)擊數(shù)量2. sql語(yǔ)句 - 如何在mysql中批量添加用戶?3. mysql 可以從 TCP 連接但是不能從 socket 鏈接4. mysql - PHP定時(shí)通知、按時(shí)發(fā)布怎么做?5. 怎么php怎么通過(guò)數(shù)組顯示sql查詢結(jié)果呢,查詢結(jié)果有多條,如圖。6. mysql - JAVA怎么實(shí)現(xiàn)一個(gè)DAO同時(shí)實(shí)現(xiàn)查詢兩個(gè)實(shí)體類的結(jié)果集7. 事務(wù) - mysql共享鎖lock in share mode的實(shí)際使用場(chǎng)景8. mysql建表索引問(wèn)題求助9. mysql - 數(shù)據(jù)庫(kù)建字段,默認(rèn)值空和empty string有什么區(qū)別 11010. mysql 非主鍵做范圍查找實(shí)現(xiàn)原理的一點(diǎn)困惑
