Javascript jQuery弹出窗口和div元素的转换

我在下面创建了一个表单，我想用它来代替提示框。我想让它在加载时弹出一个橡皮筋效果，然后当用户单击“确认”时，它将输入存储在我的javascript文件中的一个变量中，3d在z轴上转换为略微增长（似乎向屏幕移动），随着它向左转换并收缩回略小于原始大小。我不知道如何做到这一点。有人能帮我吗

<form id="player-one" onsubmit="return false;">
    <input type="text" class="form-control" placeholder="Player : : 1">
    <button type="submit" class="btn btn-default">
        Confirm
    </button>
</form>

证实

我已经满足了你80%的需求，但我不知道你说的最后一个效果是什么

一旦你能给我看一些类似的东西，或者更好地解释它，我就会更新答案

看看下面的例子

document.addEventListener（'DOMContentLoaded'，function（）{
var popup=document.getElementById（'language-popup'）；
popup.classList.add（'animated'，'bounceIn'）；
document.querySelector（'a.close'）。addEventListener（'click'，函数（e）{
popup.classList.add（'hidden'）；
});
document.getElementById（'player-one'）。addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
popup.classList.add（'animated'，'zoomoutdown'）；
var txt=document.getElementById（'txtplayerne'）；
//使用txt.value将其存储到所需的变量中
});
});
。隐藏{
显示：无；
}
#语言弹出窗口{
背景色：#AAAAFF；
字体系列：Verdana；
填充：12px；
边界半径：10px；
宽度：300px；
高度：150像素；
位置：绝对位置；
顶部：50px；
}
#语言弹出窗口h3{
文本对齐：居中；
}
#语言弹出式ul{
列表样式类型：无；
}
#语言弹出窗口a{
文字装饰：无；
颜色：黑色；
}
#语言弹出窗口a：悬停{
文字装饰：下划线；
}
#语言弹出窗口。关闭{
浮动：对；
}
#语言弹出窗口。关闭：悬停{
文字装饰：无；
}
#语言弹出窗口。关闭：在{
内容:'✖';
光标：指针；
}
.动画{
动画持续时间：1s；
动画填充模式：两者都有；
}
@关键帧反弹{
从，20%，40%，60%，80%到{
-webkit动画计时功能：立方贝塞尔（0.215、0.610、0.355、1.000）；
动画计时功能：立方贝塞尔（0.215,0.610,0.355,1.000）；
}
0% {
不透明度：0；
-webkit转换：scale3d（.3、.3、.3）；
变换：scale3d（.3、.3、.3）；
}
20% {
-webkit转换：scale3d（1.1,1.1,1.1）；
转换：scale3d（1.1,1.1,1.1）；
}
40% {
-webkit转换：scale3d（.9、.9、.9）；
变换：scale3d（.9,9,9）；
}
60% {
不透明度：1；
-webkit转换：scale3d（1.03,1.03,1.03）；
变换：scale3d（1.03,1.03,1.03）；
}
80% {
-webkit转换：scale3d（.97、.97、.97）；
变换：scale3d（.97、.97、.97）；
}
到{
不透明度：1；
-webkit转换：scale3d（1,1,1）；
变换：scale3d（1,1,1）；
}
}
波森先生{
-webkit动画名称：bounceIn；
动画名称：bounceIn；
}
@关键帧缩放{
40% {
不透明度：1；
变换：scale3d（.475，.475，.475）translate3d（0，-60px，0）；
动画计时功能：立方贝塞尔（0.550,0.055,0.675,0.190）；
}
到{
不透明度：0；
转换：scale3d（.1，.1，.1）translate3d（02000px，0）；
变换原点：中心-底部；
动画计时功能：立方贝塞尔（0.175,0.885,0.320,1）；
}
}
.Zoomoundown{
动画名称：zoomoutdown；
}

玩家
我不知道您所说的效果是什么：
3d在z轴上平移，在向左过渡并收缩回比原始尺寸稍小时略微增大（似乎向屏幕移动）
，你能给我看一些类似的东西吗？你是说像apple password error这样的动画吗？有点像这样：第一个效果是：淡入和缩放，但我的意思是橡皮筋效果就像它在缩放到100%之前从90%缩放到110%，我是否应该删除橡皮筋效果，添加淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡。看看这最后一个版本。它以前的样子正是我想要的：）