CSS關鍵幀動畫
阿新 • • 發佈:2020-12-06
@keyframes m{ from{margin-left:50px; background:green;}/*開始*/ to{margin-left:300px; background: blue;}/*結束*/ } 也可以設定0%——100%設定,可以設定更多動畫 animation-name:m;/*匯入動畫的名字*/ animation-duration:2s;/*設定動畫的時長*/ animation-timing-function:時間曲線,ease animation-delay規定動畫何時開始,預設0 animation-iteration-count:3 播放的次數 infinite無數次 animation-direction: alternate;/*反向播放*/
@keyframes m{ from{margin-left:50px; background:green;}/*開始*/ to{margin-left:300px; background: blue;}/*結束*/ } 也可以設定0%——100%設定,可以設定更多動畫 animation-name:m;/*匯入動畫的名字*/ animation-duration:2s;/*設定動畫的時長*/ animation-timing-function:時間曲線,ease animation-delay規定動畫何時開始,預設0 animation-iteration-count:3 播放的次數 infinite無數次 animation-direction: alternate;/*反向播放*/