显示属性，在 firefox mozilla 中不起作用

Question

我正在尝试创建一个动画，在这个动画中我设置了

display:none

和

display:block

，但它在 mozilla firefox 中不起作用:( 而在 chrome 中工作得很好

还使用 -moz- 关键字进行了测试

@keyframes edit-page-close {
  0% {
    display: block !important;
    top: 15vh;
  }
  100% {
    top: -70vh;
    display: none;
  }
}

Answer 1

您可以尝试使用

Opacity

来达到同样的效果吗？另外，CSS 无法显示

animated

，因为

display

不是

animated

属性。

@keyframes edit-page-close {
  0% {
    opacity: 1;
    visibility: visible;
    top: 15vh;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    top: -70vh;
  }
}

如果这有帮助，请告诉我。