CSS動畫是現(xiàn)代網(wǎng)站設(shè)計中的重要組成部分。有了動畫，你可以吸引用戶的注意力和提升網(wǎng)站的體驗感。下面介紹了CSS定義動畫的方式。

1. 使用@keyframes
@keyframes是CSS動畫定義的核心，它允許你定義動畫的不同階段和變化。在下面的例子中，我們定義了一個從0%到100%的顏色變化動畫：
@keyframes color-change {
0% { background-color: red; }
50% { background-color: blue; }
100% { background-color: green; }
}
2. 使用animation屬性
animation屬性允許你將@keyframes動畫和其他屬性組合在一起，以創(chuàng)建完整的動畫效果。在下面的例子中，我們定義了一個動畫名為color-change，并將其應用到一個div元素上：
div {
width: 100px;
height: 100px;
background-color: red;
animation: color-change 2s infinite;
}
3. 使用transition屬性
transition屬性允許你在狀態(tài)之間創(chuàng)建平滑的過渡效果。在下面的例子中，我們定義了一個鼠標懸停在按鈕上時，背景顏色漸變的過渡效果：
button {
background-color: red;
color: white;
transition: background-color 0.5s ease;
}
button:hover {
background-color: blue;
}

以上三種方式都是定義CSS動畫的常見方式，可以用來創(chuàng)建不同的動畫效果。使用它們可以使網(wǎng)站更加生動有趣，具有更好的用戶體驗。