实现弹窗从上而下滑入效果

场景：如果运营有个需求叫做天降红包，需要从上滑入一个红包，该如何实现这个效果呢

js文件：
<div className="red-packet-index-pop">
   这是需要缓慢滑入的东西，比如红包img
</div>

css文件：
.red-packet-index-pop{
  animation: fromSky 1s ease-out;
  animation-fill-mode: forwards;
  top: -400px;
}
@keyframes fromSky {
  0% {
    top: -400px;
  }
  100% {
    top: 0;
  }
}

animation的参数：

1.第一个是规定需要绑定到选择器的 keyframe 名称，和下面对应即可
2.第二个是动画的时间
3.动画的效果，曲线效果