CSS AnimationはEdgeでのみ動作しています

Question

私には問題がないと思われるCSSアニメーションがあります。それには2つの部分があり、最初に「フェード」と「移動」があります。動作しない部分は、「移動」アニメーションです。驚いたことに、完全なアニメーションは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;を追加し、移動作業をする必要があります。位置（相対、絶対または固定）を指定していない場合、ブラウザはその位置を移動できません。