CSS Animation is only working in Edge

Question

I have a CSS animation that I do I not see a problem with. There are two parts to it, first the "fade" and then the "move". The part not working is the "move" animation. Surprisingly, the full animation works in Microsoft Edge but fails in every other browser i.e Chrome, Firefox and Opera. Can someone tell me where I went wrong?

#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

The animations move and move1 doesn't have a @keyframes, with no prefix.

Edit:

Add position:relative; to your #about, and the moves should work. if you haven't specified a position (relative, absolute or fixed), the browser can't move it.