CSS3是一種強(qiáng)大的技術(shù)，它可以讓我們實(shí)現(xiàn)各種各樣的效果。其中一個(gè)流行的效果是縮小進(jìn)入。

/* 縮小進(jìn)入動(dòng)畫(huà) */
.zoom-in {
animation: zoom-in .4s cubic-bezier(0.42, 0, 0.21, 1) forwards;
transform-origin: center center;
}
/* 縮小進(jìn)入動(dòng)畫(huà)keyframes */
@keyframes zoom-in {
from {
transform: scale(0.5);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}

首先，我們需要?jiǎng)?chuàng)建一個(gè)CSS類名為zoom-in，它包含了動(dòng)畫(huà)和變換的屬性。

在animation屬性中，我們定義了動(dòng)畫(huà)的名稱和時(shí)間，以及緩動(dòng)函數(shù)和動(dòng)畫(huà)結(jié)束后保留最終狀態(tài)的關(guān)鍵字forwards。

在變換中，我們使用了transform-origin來(lái)定義變換的原點(diǎn)，這里我們使用了元素的中心。

接下來(lái)，我們定義了CSS關(guān)鍵幀keyframes。我們將縮小的大小設(shè)置為0.5，同時(shí)將元素的不透明度設(shè)置為0。

然后，在最后一個(gè)關(guān)鍵幀中，我們將縮放設(shè)置為1，同時(shí)將元素的不透明度設(shè)置為1。

一旦我們將類添加到元素中，它就會(huì)以縮小進(jìn)入的動(dòng)畫(huà)效果出現(xiàn)。