CSS 动画仅在 Edge 中有效

Question

我有一个 CSS 动画，我没有发现任何问题。它有两个部分，首先是 "fade"，然后是 "move"。不工作的部分是 "move" 动画。令人惊讶的是，完整的动画在 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，这些动作应该有效。如果您没有指定位置（相对、绝对或固定），浏览器将无法移动它。

CSS 动画仅在 Edge 中有效

CSS Animation is only working in Edge

css

keyframe

css-animations