css怎么从下往上过渡

CSS中，我们可以利用transition属性来为元素添加动画效果。与这个属性相关的其他属性包括transition-delay、transition-duration、transition-property和transition-timing-function。在这篇文章中，我们将聚焦于transition-timing-function，它能控制元素的过渡效果的速度和形式。

在transition-timing-function属性中，我们可以使用ease、linear、ease-in、ease-out、ease-in-out等关键字，还可以通过cubic-bezier()函数来定义自己的过渡函数。

具体到本文主题，如何让元素从下往上过渡呢？我们可以借助于关键字ease-in-out和transform属性来实现。

    .Box {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: #eee;
        transition: transform 1s ease-in-out;
    }

    .Box:hover {
        transform: translateY(-100px);
    }

在上述代码中，我们首先将.Box的position属性设置为absolute，并将bottom属性设置为0，从而将元素放置在页面底部。我们还设置了过渡效果的属性和时间，使得元素在1秒内以ease-in-out的形式缓慢过渡。

接下来，我们在:hover选择器中给元素添加了一个transform属性，并将其值设置为translateY(-100px)。这意味着当鼠标指针悬停在元素上时，它将上移100像素（translateY是沿y轴方向移动元素，负值表示向上移动）。

这样一来，我们就成功地让元素在鼠标悬停时从下往上过渡了。