CSS新增變形動(dòng)畫屬性

在CSS3中，新增了很多強(qiáng)大的變形動(dòng)畫屬性，如transform、transition、animation等，這些屬性能夠充分發(fā)揮CSS動(dòng)畫的作用。

其中，transform屬性是最常用的一個(gè)屬性，它能夠?qū)崿F(xiàn)許多復(fù)雜的動(dòng)畫效果，比如旋轉(zhuǎn)、放大、傾斜等等。

.box {
transform: rotate(45deg);
transition: transform .5s;
}
.box:hover {
transform: rotate(90deg);
}

上面的代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的旋轉(zhuǎn)動(dòng)畫效果，當(dāng)鼠標(biāo)放在.box元素上時(shí)，元素就會(huì)旋轉(zhuǎn)90度。

除了transform屬性之外，transition屬性也十分重要，它能夠讓我們控制過渡效果的時(shí)間和方式。

.box {
transition: all .3s ease-in-out;
}
.box:hover {
transform: scale(1.2);
}

上面的代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的縮放動(dòng)畫效果，當(dāng)鼠標(biāo)放在.box元素上時(shí)，元素會(huì)縮放1.2倍。

除了單獨(dú)使用transform和transition屬性，我們還可以使用animation屬性來實(shí)現(xiàn)更加復(fù)雜的動(dòng)畫效果。

.box {
animation: rotate 2s ease-in-out infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}

上面的代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的旋轉(zhuǎn)動(dòng)畫效果，動(dòng)畫會(huì)無限循環(huán)，從0度到360度旋轉(zhuǎn)。

綜上所述，CSS3中新增的變形動(dòng)畫屬性為我們提供了豐富的動(dòng)畫效果，使得我們能夠輕松實(shí)現(xiàn)各種各樣的交互效果，讓網(wǎng)頁看起來更加生動(dòng)、有趣。