在網(wǎng)頁(yè)設(shè)計(jì)中，CSS 動(dòng)畫(huà)是實(shí)現(xiàn)動(dòng)態(tài)效果的重要方法之一。其中，打開(kāi)圖像再做的動(dòng)畫(huà)效果常被用于圖片展示頁(yè)，使得圖片在頁(yè)面加載時(shí)有漸進(jìn)式的效果，增加了用戶體驗(yàn)。

/* 定義一個(gè)類名 */
.open-image {
opacity: 0; /* 圖片透明度為0 */
transform: scale(0.8); /* 圖片縮小80% */
animation: openImage 0.5s ease-in-out forwards;
/* 播放名為openImage的動(dòng)畫(huà)，時(shí)長(zhǎng)0.5秒，運(yùn)動(dòng)方式為緩進(jìn)緩出，播放后保持狀態(tài) */
}
/* 定義openImage動(dòng)畫(huà) */
@keyframes openImage {
to {
opacity: 1; /* 圖片透明度為1 */
transform: scale(1); /* 圖片恢復(fù)原大小 */
}
}

在 CSS 中，我們通過(guò)為需要實(shí)現(xiàn)動(dòng)畫(huà)效果的元素定義相應(yīng)的類名，并設(shè)置該類名的 CSS 樣式和動(dòng)畫(huà)效果，即可實(shí)現(xiàn)動(dòng)畫(huà)效果。

以上代碼中，我們創(chuàng)建了一個(gè)名為.open-image的類，其中包含了需要實(shí)現(xiàn)的動(dòng)畫(huà)效果。在該類中，我們使用 CSS 屬性 transform 和 opacity 去控制圖片的縮放和透明度，并通過(guò) animation 屬性來(lái)播放一個(gè)名為openImage的動(dòng)畫(huà)。

在 keyframes 中，我們定義了 openImage 動(dòng)畫(huà)，它通過(guò) transform 和 opacity 屬性去控制圖片的動(dòng)態(tài)效果。其中 to 表示在動(dòng)畫(huà)結(jié)束時(shí)的變化狀態(tài)。

在實(shí)際應(yīng)用中，我們可以把該類名應(yīng)用到需要實(shí)現(xiàn)該效果的圖片上，如下所示：

<img class="open-image" src="image.jpg" alt="image">

這樣，當(dāng)頁(yè)面加載時(shí)，圖片將會(huì)有一個(gè)從縮小到原大小并漸漸顯示的效果，以增加用戶體驗(yàn)。使用 CSS 動(dòng)畫(huà)可以讓網(wǎng)頁(yè)效果更加生動(dòng)，給用戶帶來(lái)更好的瀏覽體驗(yàn)。