CSS元素从上滑入页面的实现方法，在线实例

2022-03-25

CSS元素从上滑入页面，常应用于类似toast消息，直接看下效果。

（刷新当前页面可重复查看）

实例代码：

<style>#demo {
  width:200px;
  height:100px;
  background:yellow;
  animation: bounceIn 1s cubic-bezier(0.209, 0.579, 0.289, 1.000)
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translate3d(0, -1000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: none;
  }
}
</style>

<div id="demo"></div>

如果需要从其他方向滑入，简单修改translate3d即可。

参考资料：https://blog.csdn.net/qq_36957885/article/details/101027181

WEB开发