CSS3是前端開發(fā)中的一個重要技術(shù)，其中動畫也是最為常見的應(yīng)用之一。那么，CSS3用什么來創(chuàng)建動畫呢？下面我們來一起學(xué)習(xí)。

1. transition
transition是CSS3提供的一個屬性，可以在元素發(fā)生變化時產(chǎn)生平滑的過渡動畫效果。使用transition制作動畫不需要過多的代碼，只需要定義中間狀態(tài)，CSS3會自動完成動畫過渡。
例如：
.box {
width: 100px;
height: 100px;
background-color: #f00;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
當(dāng)元素狀態(tài)變化時，它的width屬性值從100px變?yōu)?00px，變化過程持續(xù)2秒，并以ease-in-out（先緩沖后緩沖）的方式執(zhí)行過渡動畫。
2. animation
animation是CSS3提供的屬性，具有比transition更加豐富的屬性和功能。它可以在元素變化時產(chǎn)生高度自定義的動畫效果。使用animation需要定義關(guān)鍵幀，對于每一幀的樣式和持續(xù)時間都可以自定義。
例如：
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: myAnimation 2s linear infinite;
}
@keyframes myAnimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
元素在持續(xù)的2秒間內(nèi)，以線性的方式無限循環(huán)播放myAnimation動畫。在myAnimation中，定義了三個關(guān)鍵幀，即0%、50%、100%，這些關(guān)鍵幀分別定義了元素在不同時刻的樣式。
3. transform
transform是CSS3提供的屬性，可以對元素進(jìn)行旋轉(zhuǎn)、縮放、偏移等變換，同時也可以結(jié)合animation和transition屬性制作動畫效果。
例如：
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
.box:hover {
transform: rotate(360deg);
transition: transform 2s ease-in-out;
}
鼠標(biāo)懸浮在.box元素上時，元素將以360度旋轉(zhuǎn)，在2秒間完成變換，并以ease-in-out的方式過渡實現(xiàn)。
以上三個CSS3屬性都可以用來制作動畫效果，目前這些屬性幾乎被所有主流瀏覽器支持，使用起來也比較簡單。我們可以結(jié)合實際需求選擇合適的方法，制作出優(yōu)雅、流暢的動畫效果。