寫程式學習筆記05 - 設定CSS Animation的次數

in hive-180932 •  3 months ago 

之前幾課一直在學習CSS Animation和keyframes的使用方法,那時候我就已經在想:如果要重覆animation應該如何做?因為我見過有一些網站的Animation是不停止的,我相信一定會有方法。

本來我想過有loop,例如for loop, while loop去設定,但沒想到,這一節課就學到了,而且只需要一個command:animation-iteration-count。

animation-iteration-count是設定animation運行的次數,1是一次,2是兩次,3是三次,infinite就是無限次了。

以這一題為例,題目已預設了一個上下彈跳的球,那麼,只要我加一句animation-iteration-count: infinite;,那麼這球就會瘋狂不停止的彈跳了!

#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}

得到nuag的提點,用gif來表達效果!

ezgif.com-video-to-gif.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:  

厉害~~圆圆的跳上跳下~ 和你跳舞的样子很像吧?

我跳時的肥仔波在跳上跳下

🤣🤣🤣一定好好睇....好想搵日睇你跳舞

为你拍拍拍拍阿柔

這次不啪了,只拍