CSS 是一種用于設(shè)計(jì)網(wǎng)頁樣式的語言。在 CSS 中，我們可以創(chuàng)建很多不同的動(dòng)畫效果，這些效果能夠吸引用戶的注意力并提升用戶體驗(yàn)。在本篇文章中，我們將討論如何同時(shí)執(zhí)行多個(gè)動(dòng)畫。

/* 定義一個(gè)元素同時(shí)執(zhí)行旋轉(zhuǎn)和縮放動(dòng)畫 */
.element {
animation: rotate 1s linear, scale 2s ease-in-out;
}
/* 旋轉(zhuǎn)動(dòng)畫 */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 縮放動(dòng)畫 */
@keyframes scale {
from { transform: scale(1); }
to { transform: scale(2); }
}

在上面的代碼中，我們首先給這個(gè)元素定義了兩個(gè)不同的動(dòng)畫：旋轉(zhuǎn)和縮放。這兩個(gè)動(dòng)畫分別使用了不同的關(guān)鍵幀 (@keyframes) 聲明方式，指定了動(dòng)畫的開始狀態(tài)和結(jié)束狀態(tài)以及過渡時(shí)間。

接下來，我們需要將這兩個(gè)動(dòng)畫同時(shí)應(yīng)用于元素上，這就需要使用到 animation 屬性。在這個(gè)屬性中，我們可以指定一個(gè)或多個(gè)動(dòng)畫名稱，用逗號(hào)分隔即可。這里我們分別指定了 rotate 和 scale 的動(dòng)畫名稱，并且還分別指定了它們的執(zhí)行時(shí)間，以及動(dòng)畫效果的變化方式。

到這里，我們就成功地給一個(gè)元素同時(shí)添加了多個(gè)動(dòng)畫效果。如果你想給更多的元素添加動(dòng)畫效果，只需要按照這個(gè)代碼格式重復(fù)定義即可。