CSS中的動畫標簽是為了通過CSS技術來實現頁面中的動態效果,增強頁面的交互性和美觀性。在CSS3中提供了一系列的動畫標簽,其中最常用的是以下標簽:
/* 定義動畫 */ @keyframes my_animation { from { /* 初始狀態 */ transform: rotate(0deg); } to { /* 最終狀態 */ transform: rotate(360deg); } } /* 使用動畫 */ .my-div { animation-name: my_animation; /* 指定動畫名稱 */ animation-duration: 2s; /* 指定動畫持續時間 */ animation-timing-function: ease; /* 指定動畫緩動效果 */ animation-delay: 1s; /* 指定動畫延遲時間 */ animation-iteration-count: infinite; /* 指定動畫循環次數 */ animation-direction: alternate; /* 指定動畫方向 */ }
其中,@keyframes是定義動畫關鍵幀,用于指定動畫的起始狀態和終止狀態。animation-name是為元素指定動畫名稱,animation-duration是指定動畫的持續時間,animation-timing-function是指定動畫緩動效果,animation-delay是指定動畫延遲時間,animation-iteration-count是指定動畫循環次數,animation-direction是指定動畫方向。
使用CSS動畫標簽可以極大地提高網頁的交互性和美觀性,使網頁更加生動和有趣。