Question

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

我的代码：

#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像素。如果未指定宽度，高度，则元素占用保留其子元素所需的空间，但如果子元素是绝对定位的（您的情况）则不占用空间。

CSS Top属性不变

1 个答案: