首頁 > web前端 > css教學 > css中的animation是什麼

css中的animation是什麼

王林
發布: 2020-11-30 15:12:55
原創
6117 人瀏覽過

css中的animation是一個簡寫屬性,用於設定動畫屬性,如【animation-duration】,規定完成動畫所花費的時間,該屬性必須規定,否則動畫時長為0,無法播放。

css中的animation是什麼

本教學操作環境:windows10系統、css3,本文適用於所有品牌的電腦。

animation 屬性是一個簡寫屬性,用於設定六個動畫屬性:

(學習影片推薦:css影片教學

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
登入後複製

註釋:請務必規定animation-duration 屬性,否則長度為0,就不會播放動畫了。

語法:

animation: name duration timing-function delay iteration-count direction;
登入後複製

animation-name    規定需要綁定到選擇器的 keyframe 名稱。 。    

animation-duration    規定完成動畫所花費的時間,以秒或毫秒計。   

animation-timing-function    規定動畫的速度曲線。   

animation-delay    規定在動畫開始前的延遲。   

animation-iteration-count    規定動畫應該播放的次數。   

animation-direction    規定是否應該輪流反向播放動畫。   

範例:

使用簡寫屬性,將動畫與 div 元素綁定:

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
登入後複製

相關建議:CSS教學

#

以上是css中的animation是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板