css从下往上移动动画

使用CSS实现下往上移动动画非常简单，只需几行代码即可。

/* 定义动画 */
@keyframes move-up{
    0% {transform: translateY(100%);}
    100% {transform: translateY(0);}
}

/* 应用动画 */
.element{
    animation: move-up 1s ease-in-out;
}

/* 设置元素位置 */
.element{
    position: relative;
    top: 100%;
}

首先，我们需要定义一个移动的动画，这里使用了CSS3的关键帧动画，即@keyframes。

关键帧动画需要定义动画的起点和终点，这里我们设置动画从下往上移动，起点为元素transform的Y轴值为100%，终点为0%。

接着，我们需要将动画应用到元素上，使用animation属性即可，这里的move-up为我们刚刚定义的动画名称。

最后，我们需要设置元素的位置，将元素定位在原本位置的下方，即使用position:relative;top:100%。

这样，我们就实现了一个简单的下往上移动动画效果。