@keyframes規則的問題
請問這段代碼云的動畫中，@keyframes中的50%是什么意思？
蒙奇奇3
2017-02-02
2 回答
舉報
0/150
提交
取消
2017-11-09
要理解keyframes先看.cloudy{}中的代碼animation: cloudy 5s ease-in-out infinite; 這里定義了一個動畫，名稱為cloudy，時長5秒，timing-function為ease-in-out，執行無限次。
@keyframes表示關鍵幀，也就是動畫執行到某個時刻，這一幀是什么樣子。
那么，這個云的例子中的關鍵幀
@keyframes cloudy {
??? 50% {transform: translateY(-0.1rem); }
}
就表示，在動畫進行到50%的時候，云進行-0.1rem的位移，這里的50%就是上面定義動畫時的5s的50%，也就是2.5s。
2017-02-19
@keyframes定義一個動畫,并定義具體的動畫效果,比如是放大還是位移等等。 @keyfra... 百分比是指動畫完成一遍的時間長度的的百分比 ,0%是動畫的開始時間,50%是動畫完成