CSS動畫很有趣，其中一個比較常見的動畫就是從下往上緩緩提升的效果。

首先，我們需要為元素設置初始狀態（也就是在正常情況下的樣式），讓元素在頁面上位于底部。

.element {
position: fixed;
bottom: -50px;
width: 100px;
height: 50px;
background-color: #fff;
}

然后，我們需要為元素設置動畫效果（也就是在鼠標懸停時的樣式），讓元素緩慢從底部向上移動。

.element:hover {
bottom: 0;
transition: bottom 0.5s ease-in-out;
}

代碼解釋：

• bottom: 0;讓元素的底部與頁面底部齊平，實現從下往上的移動效果。
• transition: bottom 0.5s ease-in-out;讓元素在底部和頂部之間緩慢移動，持續時間為0.5秒，緩動方式為ease-in-out。

現在，我們已經成功地實現了從下往上緩緩提升的效果。

如果想要讓元素在頁面上停留一段時間再緩緩消失，可以使用下面的代碼：

.element:hover {
bottom: 0;
transition: bottom 0.5s ease-in-out;
}
.element:hover::after {
content: "";
position: absolute;
width: 100%;
height: 50px;
top: 0;
left: 0;
background-color: #fff;
animation: fadeOut 1s ease-in-out 0.5s;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

代碼解釋：

• ::after偽元素用于在元素消失時生成一個占位元素，保持布局不變。
• animation: fadeOut 1s ease-in-out 0.5s;讓偽元素的透明度從1漸漸變為0，持續1秒，加入0.5秒的延遲。
• @keyframes fadeOut { ... }定義漸隱動畫。

通過上面的代碼，元素將在鼠標懸停時從下往上緩緩提升，停留片刻后再緩緩消失。