css将顶部动画设置为自动

我有一个div需要设置动画

动画从距离视口顶部43px的div开始，然后向下移动，然后div应停止在其自然位置（顶部：自动）-div通常位于的位置

我将div的样式设置为：

.page-slider {
    position: absolute;
    background-color: #FFFFFF;
    display: block;
    width: 100%;
    -webkit-box-shadow: 0 -7px 7px -7px #333333;
    -moz-box-shadow: 0 -7px 7px -7px #333333;
    box-shadow: 0 -7px 7px -7px #333333;
    animation: uncover 3s ease 0s 1 ;
    -webkit-animation: uncover 3s ease 0s 1 ;
    -moz-animation: uncover 3s ease 0s 1 ;
}

我已将我的动画定义为：

@keyframes uncover {
    from {
        top: 43px;
        height: 1000px;
    }

    to {
        top: auto;
        height: 0;
    }
}

@-webkit-keyframes uncover {
    from {
        top: 43px;
        height: 1000px;
    }

    to {
        top: auto;
        height: 0;
    }
}

div基本上是空的，因此高度被设置为1000px，以便在其向底部移动时阻止其后面的内容

现在的问题是，使用上面的标记，动画的行为很奇怪。它开始于43像素，正如预期的那样，但不是向下移动，而是向上移动（div的高度随着每秒的减少而降低），然后div在其自然位置停止

如果我将关键帧

部分的
顶部
从
更改为
100%
从
自动
，则它会执行此操作，但div会穿过其自然位置一直到达视口底部，然后在3秒后返回其自然位置

如何设置div的动画，使其从顶部以43像素开始，然后在其自然位置停止（顶部：自动）？
尝试使用
max height
，而不是
height
，可能
max height
比您的长方体所能帮助的要大。
我认为您可以使用：fill模式在末尾停止动画

似乎是同一个问题：


致以最诚挚的问候。
没有。我的div中没有内容。因此div变得不可见（高度=0）；您可以添加一个JSFIDLE吗？现在它将位于顶部，因为它是一个绝对定位的元素。所以默认位置在左上角。那么默认位置在哪里呢？