CSS3 Display動畫是CSS中一個非常有用的特性。 它允許我們以各種方式顯示和隱藏HTML元素，從而增強用戶界面的交互性。 Display屬性還可以與其他CSS特性一起使用，例如: transition、transform和animation。在本文中，我們將介紹如何使用CSS3 Display動畫來創建引人注目的UI。

/* 定義一個基本的樣式 */
.animated-box {
width: 200px;
height: 200px;
background-color: #F44336;
display: inline-block;
}
/* 定義動畫 */
.animated-box:hover {
display: none;
animation-name: slideOutLeft;
animation-duration: 1s;
animation-fill-mode: forwards;
}
/* 定義動畫關鍵幀 */
@keyframes slideOutLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}

以上代碼中首先定義了一個基本的樣式，它定義了一個200*200大小的div塊，并設置了背景顏色。接著，當鼠標懸停在div上時，我們將把div元素隱藏掉，并通過CSS動畫特性產生一個側向滑動的效果。最后，我們在CSS樣式表中定義了一個名稱為slideOutLeft的關鍵幀，它表示我們要實現一個從左往右的滑動效果。 這些CSS代碼的運行方式很簡單，當鼠標懸停在div元素上時，它將隱藏并產生一個滑動效果，讓用戶覺得在頁面上做出了一些非常酷的交互。 通過學習CSS3 Display動畫的使用方法，我們可以創建更加引人注目的交互，增強Web應用程序的用戶體驗。當然，我們也可以將這個技術用于更加高級、復雜的UI設計中。希望本文的介紹能為你提供一些有用的知識，讓你更好地掌握這一CSS特性。