animation-name是CSS中用于指定動畫名稱的屬性。通過這個屬性可以為CSS動畫指定一個名稱,方便其他CSS屬性調用。
/*定義一個名為move的動畫*/ @keyframes move { from {left: 0;} to {left: 100px;} } /*調用名為move的動畫*/ div { animation-name: move; }
在上述代碼中,我們通過@keyframes關鍵字定義一個名為move的動畫,該動畫從left為0的位置開始移動,直到left為100px的位置結束。接著,我們將該動畫調用到div標簽中,通過animation-name屬性將動畫名稱指定為move。
需要注意的是,動畫名稱需要使用英文字母、數字、下劃線等組成,并且不能以數字開頭。如果同時定義了多個動畫,可以通過animation-name屬性來依次調用。
/*定義兩個名為move和spin的動畫*/ @keyframes move { from {left: 0;} to {left: 100px;} } @keyframes spin { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } /*依次調用兩個動畫*/ div { animation-name: move, spin; animation-duration: 3s, 2s; /*設置動畫持續時間*/ animation-timing-function: ease-in-out, linear; /*設置動畫速度曲線*/ animation-iteration-count: infinite, 3; /*設置動畫循環次數*/ }
在上述代碼中,我們定義了兩個名為move和spin的動畫,并依次調用到div標簽中。通過animation-duration屬性可以設置動畫持續時間,通過animation-timing-function屬性可以設置動畫速度曲線,通過animation-iteration-count屬性可以設置動畫循環次數。
總的來說,animation-name屬性是CSS動畫中比較核心的屬性之一,通過該屬性可以為動畫指定一個名稱,并方便其他CSS屬性進行調用。
上一篇css屬性英文單詞