CSSトッププロパティが変更されない

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ピクセルです。幅、高さが指定されていない場合、要素は子を保持するのに必要なスペースをとりますが、子が絶対配置されている場合（あなたの場合）はスペースをとりません。