JavaScript 对绝对定位元素从底部到每个原始位置进行动画处理

Question

我在相对定位的容器内有几个绝对定位的元素，我正在尝试为它们设置动画:

来自:起始 DOM 位置下方 200px

To:起始 DOM 位置

我尝试过 .animate() 函数，但只成功地执行了相反的动画。

编辑:我的意思是我试图在页面加载时为元素的过渡设置动画。

Answer 1

我设法使用 CSS 关键帧来做到这一点。

.elementsClass{
    transform: translateY(200px);
    animation: moveUp 0.8s ease forwards;
}

@keyframes moveUp {
    to {
        transform: translateY(0);
    }
}

@-moz-keyframes moveUp {
    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes moveUp {
    to {
        transform: translateY(0);
    }
}

@-ms-keyframes moveUp {
    to {
        transform: translateY(0);
    }
}

现在，元素加载到其起始位置下方 200 像素处，并显示在其原始位置。