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;

}

相关推荐
子醉28 分钟前
推荐一种适合前端开发使用的解决本地跨域问题的办法
前端
Niyy_36 分钟前
前端一个工程构建多个项目,记录一次工程搭建
前端·javascript
xiangxiongfly9151 小时前
CSS link标签
前端·css
岁月宁静2 小时前
AI 多模态全栈应用项目描述
前端·vue.js·node.js
十年磨一剑~2 小时前
html+js开发一个测试工具
javascript·css·html
爱吃巧克力的程序媛2 小时前
将qt界面中加载css或者qss样式
开发语言·css·qt
nn_(nana)3 小时前
修改文件权限--- chmod ,vi/vim,查看文件内容,yum-软件包管理器,systemctl管理系统服务
前端
汪汪队立大功1233 小时前
JavaScript是怎么和html元素关联起来的?
开发语言·javascript·html
烛阴4 小时前
从零开始掌握C#核心:变量与数据类型
前端·c#