CSS3是一種用于為網頁添加豐富樣式和交互的語言,其中包括了許多用于創建動畫效果的屬性。對于設置動畫時間軸,我們可以使用CSS3中的animation屬性來實現。
.box { width: 100px; height: 100px; background-color: red; animation: myAnimation 2s linear infinite; } @keyframes myAnimation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
在上面的代碼中,我們用一個div元素來創建一個紅色正方形。然后使用animation屬性來將一個名為“myAnimation”的動畫應用到這個元素上。我們指定了動畫的持續時間為2秒,并設置了線性動畫效果和無限循環。最后,我們定義了動畫中需要改變的屬性、值、持續時間和動畫延遲。
通過使用@keyframes關鍵字,我們創建了一個名為“myAnimation”的動畫,并定義了其中的兩個關鍵幀,即從初始狀態到終止狀態的過渡效果。在我們的例子中,這個過渡效果是通過逆時針旋轉正方形360度實現的。
結合使用animation和@keyframes屬性,我們可以輕松地為網頁添加各種動畫效果。并且,在動畫的實現過程中可以設置不同的時間軸以及其他屬性,以滿足不同的設計要求。
上一篇css3讓園旋轉起來
下一篇css3讓寬度=高度