在開發網頁時，常常需要使用CSS來控制元素的展示效果。例如，有時需要讓某個元素向上移動并消失，這時就需要用到CSS中的動畫和過渡效果。

CSS中提供了transform屬性和transition屬性，可以使用它們來實現元素的動畫效果。transform屬性可以用來對元素進行旋轉、縮放、位移等變換，而transition屬性則控制這種變換在何時何地以何種方式發生。

/* 定義動畫元素 */
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.5s ease-out;
}
/* 定義鼠標懸停時的變換效果 */
.box:hover {
transform: translateY(-50%);
}

以上代碼中，我們定義了一個寬高為100px的紅色元素，并在其上定義了一個transition屬性，使得在transform屬性發生變化時，這個變化將被平滑地展示。接著，我們在:hover偽類中定義了一個位移變換，即向上移動50%的高度（即50px），當鼠標懸停在該元素上時，這個變換效果才會生效。

這樣一來，當瀏覽器呈現該頁面時，這個元素原本處于普通狀態，保持不變。當鼠標懸停上去時，它就向上移動了自身高度的一半，即50px，然后又平穩地恢復了原狀。這種動畫效果展示了CSS的高級特性，增強了網頁的趣味性和視覺效果。