HTML定義動畫名字和規則代碼

在HTML中，我們可以使用CSS的@keyframes規則來定義動畫名稱和規則代碼。通常情況下，我們可以定義動畫的名稱和規則代碼來使網頁更加有趣和動感。

下面是一個例子：

@keyframes example {
0%   {background-color: red;}
25%  {background-color: yellow;}
50%  {background-color: blue;}
100% {background-color: green;}
}

這個例子中，我們定義了一個動畫名稱為example，并且使用了四個關鍵幀來定義動畫規則。在0%時刻，背景顏色為紅色；在25%時刻，背景顏色變為黃色；在50%時刻，背景顏色變為藍色；在100%時刻，背景顏色變為綠色。

我們可以在元素的樣式里使用animation屬性來使用這個動畫：

div {
animation: example 2s infinite;
}

這個例子中，我們將動畫example應用到div元素上，使其在2秒內無限循環播放。這將使div的背景顏色按照規則代碼的順序不斷變化。

在定義動畫時，我們還可以使用一些其他的屬性，如animation-delay、animation-direction、animation-fill-mode和animation-play-state等。這些屬性可以為動畫添加更多的效果。

總之，在HTML中使用CSS的@keyframes規則定義動畫名稱和規則代碼是讓網頁更加生動有趣的好方法。