寫程式學習筆記02 - Animation的Fill Mode

in hive-180932 •  last year 

上次用CSS Animation更改了按鈕hover顏色,看似十分成功,但其實是有bug的,因為Animation的時長設了500ms,那麼500ms之後會怎樣?就算鼠標仍在按鈕上,按鈕仍會變回原來的顏色。

Screenshot 2020-04-25 at 15.01.59.png

這一次習作就教我用Animation-fill-mode來修改這個問題,其實習作上只說了將fill mode設為forward就能解決了,但沒有解釋很多,所以我也上網查了一查Animation-fill-mode,得知原來這指令是用來決定animation結束後,動畫會維持在哪個狀態。

指令一共有四種:
None: 什麼都不做,變回預持值
Forwards: 保持動畫在最後的一格,即是結束時的樣子
Backwards: 保持動畫在第一格,即是開始時的樣子
Both: 看不懂

那麼,在我們這個情況,把animation-fill-mode設為forwards就可以了

animation-fill-mode: forwards;

好了,下次繼續。

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:  

给未来的程序员拍拍拍

未來我寫一個華人Steemit

嘩加油呀。啪啪

到時有job搵我

你老闆係李老闆,哈哈,gun you fatfat!

哇,自学吗👏👏👏

對呀,現在上課效率太低