css上下动画 和淡化

.popup_hidden_bg {
transition: opacity .5s ease-out;
opacity: 0;
pointer-events: none;
/* 防止在隐藏时仍然能点击 */
}

@keyframes popupShop {
from {
transform: translateY(100%);
opacity: 0;
}

to {transform: translateY(0);opacity: 1;
}

}

@keyframes popupHidden {
from {
transform: translateY(0);
opacity: 1;
}

to {transform: translateY(100%);opacity: 0;
}

}

.openPopup {
animation: popupShop .5s forwards;
}

.hiddenPopup {
animation: popupHidden .5s forwards;
}