CSS 애니메이션은 가장자리에서만 작동합니다.

Question

문제가없는 CSS 애니메이션이 있습니다. 첫 번째로 "페이드"와 "이동"의 두 부분이 있습니다. 작동하지 않는 부분은 "이동"애니메이션입니다. 놀랍게도 전체 애니메이션은 Microsoft Edge에서 작동하지만 Chrome, Firefox 및 Opera와 같은 다른 모든 브라우저에서는 실패합니다. 누군가 내가 잘못 갔다고 말할 수 있습니까?

#about { 
visibility: hidden; 
    -webkit-animation: fadein1 .5s, move1 .5s; 
     -moz-animation: fadein1 .5s, move1 .5s; 
     -o-animation: fadein1 .5s, move1 .5s; 
} 

#about.open { 
visibility: visible; 
     -webkit-animation: fadein .5s, move .5s; 
     -moz-animation: fadein .5s, move .5s; 
      -o-animation: fadein .5s, move .5s; 
} 

@-moz-keyframes move { 
    from {top: 50px;} 
    to {top: 0px;} 
} 

@-o-keyframes move { 
    from {top: 50px;} 
    to {top: 0px;} 
} 

@keyframes move { 
    from {top: 50px;} 
    to {top: 0px;} 
} 

@-webkit-keyframes move { 
    from {top: 50px;} 
    to {top: 0px;} 
} 


@-moz-keyframes move1 { 
    from {top: 0px;} 
    to {top: 50px;} 
} 

@-o-keyframes move1 { 
    from {top: 0px;} 
    to {top: 50px;} 
} 

@keyframes move1 { 
    from {top: 0px;} 
    to {top: 50px;} 
} 

@-webkit-keyframes move1 { 
    from {top: 0px;} 
    to {top: 50px;} 
} 


@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

@-o-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 


@keyframes fadein1 { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

@-moz-keyframes fadein1 { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

@-webkit-keyframes fadein1 { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

@-o-keyframes fadein1 { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

Answer 1

애니메이션 & move 및 move1없이 접두어로하는 @keyframes이 없습니다.

편집 :

이 #about에 position:relative;를 추가하고 이동 작동합니다. 위치를 지정하지 않은 경우 (상대, 절대 또는 고정) 브라우저는이를 이동할 수 없습니다.