Css是前端開發(fā)中不可缺少的技能之一。其中的變化效果更是給網(wǎng)站增添了不少生動性和趣味性。然而，我們有時候需要讓元素進(jìn)行兩次變化效果，比如先旋轉(zhuǎn)再放大縮小。以下是如何實現(xiàn)這樣的效果。

.element {
/* 第一次變化：旋轉(zhuǎn) */
transform: rotate(45deg);
/* 這里加上任何對元素的其他樣式 */
/* 第二次變化：放大縮小 */
animation: scale 1s ease-in-out 1.5s forwards;
}
@keyframes scale {
0% {transform: rotate(45deg) scale(1);}
50% {transform: rotate(45deg) scale(1.5);}
100% {transform: rotate(45deg) scale(1);}
}

這里我們使用了transform和animation兩個屬性，前者是元素的第一次變化效果，后者是第二次變化效果。其中animation屬性設(shè)置了縮放動畫，包括執(zhí)行時間、過渡效果和延時時間，forwards表示動畫結(jié)束后保持最后狀態(tài)。

在keyframes規(guī)則里，我們定義了三個關(guān)鍵幀拉伸到指定的大小，用百分比表示，0%表示元素最開始狀態(tài)，50%表示中間狀態(tài)，100%表示最終狀態(tài)。

與此類似，我們還可以實現(xiàn)其他兩次變化效果，例如先滑動再旋轉(zhuǎn)。只需要將transform的值改為translate和rotate即可。

.element {
/* 第一次變化：滑動 */
transform: translateY(-100px);
/* 這里加上任何對元素的其他樣式 */
/* 第二次變化：旋轉(zhuǎn) */
animation: rotate 1s ease-in-out 1.5s forwards;
}
@keyframes rotate {
0% {transform:translateY(-100px) rotate(0deg);}
50% {transform:translateY(-100px) rotate(180deg);}
100% {transform:translateY(-100px) rotate(0deg);}
}

以上就是Css兩次變化的例子，讓我們的網(wǎng)頁更加豐富多彩，增添互動性。