CSS-Animation funktioniert nur in Edge

Question

Ich habe eine CSS-Animation, die ich sehe ich kein Problem mit. Es gibt zwei Teile, zuerst das "Fade" und dann das "Move". Der Teil, der nicht funktioniert, ist die "Bewegung" -Animation. Überraschenderweise funktioniert die vollständige Animation in Microsoft Edge, schlägt aber in jedem anderen Browser fehl, d. H. Chrome, Firefox und Opera. Kann mir jemand sagen, wo ich falsch gelaufen bin?

#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

Die Animationen move und move1 keinen @keyframes, ohne Präfix.

Edit:

hinzufügen position:relative; zu Ihrem #about, und die Bewegungen funktionieren sollte. Wenn Sie keine Position (relativ, absolut oder fest) angegeben haben, kann der Browser sie nicht verschieben.