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，移动应该有效。如果您还没有指定位置（相对，绝对或固定），浏览器就无法移动它。

CSS Animation仅适用于Edge

1 个答案: