CSS Top 属性不会更改

Question

我创建了一个简单的动画，使元素淡入和向上滑动，但顶部属性不会改变，它只会淡入（当我手动更改它时，它也不起作用）

我的代码：

#login {
    width: 400px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 5px;
    -webkit-animation: slideUp 1s;
    animation: slideUp 1s;
}
@-webkit-keyframes slideUp {
    from {top: 65%; opacity: 0.2;}
    to {top: 50%; opacity: 1;}
} 

@keyframes slideUp {
    from {top: 65%; opacity: 0.2;}
    to {top: 50%; opacity: 1;}
}

Answer 1

快速解决方法是不要对位置使用百分比值，而是使用像素。

使用百分比值定位元素时，相对于其父元素所包含的空间（宽度、高度）定位该元素。在您的情况下，父亲元素不占用空间，因此 50% 为 0 像素。如果未指定宽度、高度，则元素占用容纳其子元素所需的空间，但如果子元素是绝对定位的（您的情况），则它不占用空间。