CSS3 animation display是CSS3新特性中非常重要的一項(xiàng)，它能夠幫助我們制作出非常棒的動(dòng)畫效果，為網(wǎng)頁(yè)增加生動(dòng)、豐富、優(yōu)美的效果。

.animation{
width:100px;
height:100px;
background-color:red;
display:inline-block;
animation:rotate 2s linear infinite;
}
@keyframes rotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}

以上代碼實(shí)現(xiàn)了一個(gè)旋轉(zhuǎn)的動(dòng)畫，它的核心就是在animation中定義了動(dòng)畫名稱、持續(xù)時(shí)間、緩動(dòng)函數(shù)和是否循環(huán)等屬性。在@keyframes中我們可以定義動(dòng)畫的關(guān)鍵幀，比如0%和100%的狀態(tài)，以及它們之間的中間狀態(tài)，然后通過transform來實(shí)現(xiàn)動(dòng)畫效果。

此外，我們還可以使用CSS3 animation display來實(shí)現(xiàn)一些更為復(fù)雜的動(dòng)畫效果，比如平移、縮放、透明度變化等等，只需利用不同的CSS屬性實(shí)現(xiàn)。

.animation{
width:100px;
height:100px;
background-color:red;
display:inline-block;
animation:translate 2s linear infinite;
}
@keyframes translate{
0%{
transform:translate(0,0);
}
50%{
transform:translate(100px,0);
}
100%{
transform:translate(0,0);
}
}

以上代碼實(shí)現(xiàn)了一個(gè)平移的動(dòng)畫效果，它通過transform中的translate來改變?cè)氐奈恢茫瑢?shí)現(xiàn)了一個(gè)左右搖晃的效果。

總之，CSS3 animation display是一個(gè)非常強(qiáng)大的特性，能夠讓我們實(shí)現(xiàn)很多炫酷的效果，但也需要注意動(dòng)畫的性能問題，避免引起頁(yè)面的卡頓等問題。