@keyframe screen{
0%,34%,100%{opacity:0}
1%,33%{opacity:1}
}這種動畫總共只有兩個狀態，寫成多個幀的意義是什么，特別是0%,1%和33%,34%這種離得特別近的幀？
2 回答
哆啦的時光機
TA貢獻1779條經驗 獲得超6個贊
keyframes中設置的百分比是表示占動畫所有時間的百分比。比如：33%表示動畫持續到總時間的33%的時候的時間節點。
設置多個不同的時間節點，可以豐富動畫的效果，如果只設置兩個時間節點：0%，100%，那么動畫就是一個勻速變化的過程。設置多個時間節點，可以
題主提到的這個動畫，我的理解是：
1.動畫開始的時候不顯示：0%的時候 {opacity:0}；
2.開始之后的一瞬間顯示（1%的時候 {opacity:1}），并且從0% - 1%這段時間內，opacity是勻速地從 0 漸變到 1（時間短，可能看不到明顯的變化）；
3.從1% - 33%這段時間，opacity保持為1這個值不變，這段時間內一直顯示；
4.從33% - 34%這段時間內，opacity勻速地從1變化到0，這個過程跟0% - 1% 正好相反；
5.從34% - 100%這段時間內，opacity一直保持為0不變，這段時間不顯示。
總的來說，就是通過段時間內改變元素的透明度來實現一個閃爍的動畫效果。
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
我來假設一個應用場景。一張圖片，上面有個白色背景的DIV。鼠標滑過的時候想有一種被閃光燈閃了一下的感覺。注意閃光燈的亮度曲線，是嘭！一閃，然后燈光有個緩緩消失過程。(如果是我說的這個效果那么漸入/漸亮時間應該再快一點比如1%~10%,只是舉例，領會精神)
動畫0%的時候先隱藏（透明度0）這個白色的遮罩層，我想之所以這么寫是要給動畫對象透明度一個快速重置。
1~33% 亮起來；
34~100%再慢慢變透明。
其實就是作者追求的一種動畫曲線效果，讓動畫更有FEEL和節奏感，可以自己多嘗試讓動畫酷起來。勻速變化感覺就很平淡，肉，或者不符合運動規律。比如一個球掉地上彈起來，這個速度不是勻速的，用勻速做就很假。
- 2 回答
- 0 關注
- 897 瀏覽
添加回答
舉報
0/150
提交
取消