前端 - 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)這個長度
相關文章:
1. 我在centos容器里安裝docker,也就是在容器里安裝容器,報錯了?2. docker-compose中volumes的問題3. docker不顯示端口映射呢?4. golang - 用IDE看docker源碼時的小問題5. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗!6. docker容器呢SSH為什么連不通呢?7. javascript - 最近用echarts做統計圖時遇到兩個問題!!8. mac里的docker如何命令行開啟呢?9. javascript - 連續點擊觸發mouseleave事件10. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””

網公網安備