寫程式學習筆記07 - Keyframe速成法

in hive-180932 •  3 months ago 

這次仍是關於CSS Animation的課堂,之前一直學習用keyframe控制animation的變化,但如果我想那個animation一開始慢,慢慢變快,再變回慢,那不是要做很多設定?

原來,CSS是有預設值的!這個function叫animation-timing-function,就是一些預設了的效果,我舉幾個例子:

Ease: 一開始慢,慢慢變快到中段,中段之後再變慢到最後
Ease-out: 一開始快,然後變慢到最後
Ease-in: 一開始慢,再變快到最後
Linear: 均速

以這次習作為例,畫面有兩個球,我將左邊的球設定為
Animation-timing-function: linear
右邊的球則設為
Animation-timing-function: ease-out

那麼,出來的效果就會這樣了:

ezgif.com-video-to-gif (2).gif

好了,下次繼續

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

五连拍!

拍拍拍