在CSS中設(shè)置動畫名稱,可以使用@keyframes
規(guī)則來定義動畫,并通過animation-name
屬性將動畫名稱分配給元素。
使用@keyframes
規(guī)則創(chuàng)建動畫,我們可以創(chuàng)建一個名為my-animation
的動畫:
@keyframes my-animation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
上述代碼定義了一個名為my-animation
的動畫,該動畫將元素從0度旋轉(zhuǎn)到360度。
使用animation-name
屬性將動畫名稱分配給元素,我們可以將my-animation
動畫應(yīng)用于一個名為my-element
的元素:
my-element { animation-name: my-animation; animation-duration: 2s; animation-timing-function: linear; }
上述代碼將my-animation
動畫應(yīng)用于my-element
元素,并設(shè)置動畫持續(xù)時間為2秒,動畫時間函數(shù)為線性。
通過以上步驟,我們就可以在CSS中設(shè)置動畫名稱,并將動畫應(yīng)用于指定的元素。