css 弹窗出场进场动画 |css 导航菜单代码

首先，在 HTML 中，大家需要创建一个弹窗的 div，通过 JavaScript 控制其显示和隐藏：

<div class="popup">
<h2>弹窗标题</h2>
<p>弹窗内容</p>
</div>

接下来，大家需要应用 CSS 样式来实现弹窗出场进场动画。这里大家分别来看出场动画和进场动画。

出场动画：大家可以设置弹窗从下往上滑出屏幕，同时逐渐变透明，以显示弹窗消失。代码如下：

.popup {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
background-color: #fff;
animation-name: popupOut;
animation-duration: 0.5s;
animation-timing-function: ease-out;
}
@keyframes popupOut {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100%);
opacity: 0;
}
}

进场动画：大家可以设置弹窗从下往上滑入屏幕，同时逐渐变不透明，以达到弹窗出现的效果。代码如下：

.popup.open {
animation-name: popupIn;
animation-duration: 0.5s;
animation-timing-function: ease-in;
}
@keyframes popupIn {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}

以上就是弹窗出场进场动画的实现方法。通过 CSS 样式的设置，大家能够让弹窗在网页中有更好的交互效果。