CSS3的出現(xiàn)帶來(lái)了很多新的特性，其中之一就是通過(guò)CSS3實(shí)現(xiàn)動(dòng)態(tài)變化效果。其中一個(gè)經(jīng)典的應(yīng)用場(chǎng)景是實(shí)現(xiàn)由小變大的出現(xiàn)效果。

/*通過(guò)scale實(shí)現(xiàn)元素由小變大的動(dòng)態(tài)效果*/
div{
transform: scale(0);
animation: enlarge 1s ease-in-out forwards;
}
@keyframes enlarge {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}

上述代碼通過(guò)CSS3的transform屬性中的scale函數(shù)將元素初始縮放為0，然后通過(guò)動(dòng)畫的方式將元素放大至原始比例。同時(shí)，animation屬性中指定的enlarge規(guī)定了動(dòng)畫效果的過(guò)渡方式和效果持續(xù)時(shí)間。最后，通過(guò)forwards屬性，保持元素在動(dòng)畫結(jié)束后的狀態(tài)。

需要注意的是，上述代碼需要針對(duì)不同的瀏覽器進(jìn)行瀏覽器兼容性的解決，例如針對(duì)webkit內(nèi)核的瀏覽器需要添加-webkit-前綴。

由小變大的出現(xiàn)效果在很多網(wǎng)站頁(yè)面中都有廣泛的應(yīng)用，通過(guò)CSS3的scale和animation屬性，可以實(shí)現(xiàn)精美動(dòng)態(tài)的效果，讓用戶更好地感受頁(yè)面的變化和交互效果。