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 { ... }定义渐隐动画。

通过上面的代码，元素将在鼠标悬停时从下往上缓缓提升，停留片刻后再缓缓消失。