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，没有前缀。

编辑：

添加position:relative;您#about，而移动应该工作。如果您没有指定位置（相对，绝对或固定），浏览器将无法移动它。