CSS可以通過指定時間來執行動畫或者轉換效果。
要指定時間執行CSS動畫,可以使用animation屬性。該屬性包含以下幾個值:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
其中,name是動畫的名稱,duration指定動畫的持續時間,timing-function設置時間函數,delay指定在動畫開始前需要等待的時間,iteration-count指定動畫應該重復的次數,direction指定動畫是否應該反向播放,fill-mode指定在動畫播放之前和之后,元素應該如何在其父元素中定位,play-state指定動畫的播放狀態。
在CSS中,也可以通過transition屬性執行動畫。transition屬性允許指定屬性的過渡效果,并指定過渡的時間:
transition: property duration timing-function delay;
其中,property是指定過渡效果的屬性名稱,duration設置過渡效果的時間,timing-function設置時間函數,delay指定在過渡開始前需要等待的時間。
例如,以下CSS代碼定義了一個在3秒鐘內執行旋轉兩圈動畫的div元素:
div { animation: rotate 3s linear 0s 2 normal none forwards; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }
要在CSS中使用transition屬性,以下CSS代碼定義了一個在1秒鐘內執行背景顏色變化的div元素:
div { background-color: blue; transition: background-color 1s ease-in-out 0s; } div:hover { background-color: red; }
無論您是使用animation屬性還是transition屬性,在您的CSS代碼中指定時間是非常有用的,因為它允許您控制動畫或者轉換的持續時間,并確保它們與您的網站的其他元素協調一致。
下一篇css指定p標簽內容