Javascript CSS：当image1动画设置不到位时，图像集会移动，而它们应该保持在原来的位置

我正在建立一个CSS灯箱画廊。我想用CSS转换动画来美化它的部分操作。我想做的是：当你把鼠标悬停在基础图像上时，它会以一个“脉冲”来设置动画，让你知道你可以和它互动。当你点击它时，它会旋转、缩放并向观众淡出，就好像它变成了一块信息，将淡入应该出现的灯箱中。出现的盒子不仅仅是一个图像。这是一个带有图像的文本范围。然后，当您单击（X）关闭按钮或单击页面上的任意位置时，灯箱会突然消失而不消失，并且所有原始图像都会恢复原位

实际发生的情况是，你点击基础图像，它会像应该的那样旋转、缩放和淡入，但在背景中，它右边的其他图像会滑过来取而代之。然后，当你点击灯箱离开，一切都回到原位。我不想让其他图像移动到第一张图像所在的位置。我如何防止一切移动，以便当您单击image1并将其设置为动画时，其他图像保持不变？这样，如果你点击图片2、图片3、图片4、图片5等等，就不要滑过，或者其他什么东西

我正在使用一些Javascript来实现我的点击动画，这是我从另一个被回答的堆栈溢出问题中学到的。如果你能找到一个更好的方法来实现我想要的，请帮助并添加它

作为一个附带问题，我如何使lightbox出现，如果您单击（X）关闭按钮或文本框外部，它将关闭lightbox，但如果您单击文本框内部，则不会发生任何事情，并且lightbox将保持在原来的位置？通过这种方式，用户可以单击并高亮显示文本框内的文本（如果需要）

我似乎无法通过代码片段再现任何单击动画，因此，为了让您能够看到实际发生的情况，这里有一个指向我个人web帐户上原始测试代码的链接，您可以在其中看到实际的单击动画以及出现的问题：

下面是我正在使用的代码片段

$（窗口）.load（函数（）{
$（“.ClickAnim”）。单击（函数（）{
$（此）.addClass（“rotOutZm”）；
setInterval（函数（）{
$（“.ClickAnim”）.removeClass（“rotOutZm”）；
}, 2000);
});
});
/*只是一些基本样式，例如，功能不需要*/
*,
html{
字体系列：Verdana、Arial、Helvetica、无衬线；
}
html，
身体{
身高：100%；
}
身体，
形式，
ul，
锂，
P
h1，
h2，
h3，
h4，
h5{
保证金：0；
填充：0；
}
身体{
背景色：#606061；
颜色：白色；
溢出：隐藏；
}
img{
边界：无；
}
p{
字体大小：12px；
边际：0.01米0；
}
氢{
填充：10px 0 20px；
}
.清除+h2{
填充：0 20px；
}
.清楚{
高度：0！重要；
行高：0！重要；
清楚：两者都有！很重要；
字体大小：1px！重要；
保证金：0；
填充：0；
浮动：无！重要；
}
/*动画*/
.动画{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
}
/*旋转+缩放*/
@关键帧rotOutZm{
100% {
利润率：-50px；
/*图像大小为100x100px，因此*/
-webkit变换：平移3D（50vw，50vh，0）比例（3）旋转（360度）；
变换：平移3D（50vw，50vh，0）刻度（3）旋转（360度）；
不透明度：0；
}
}
@-webkit关键帧rotOutZm{
100% {
利润率：-50px；
/*图像大小为100x100px，因此*/
-webkit变换：平移3D（50vw，50vh，0）比例（3）旋转（360度）；
变换：平移3D（50vw，50vh，0）刻度（3）旋转（360度）；
不透明度：0；
}
}
罗图茨姆先生{
-webkit变换原点：中心；
-webkit动画：rotOutZm向前1.8秒；
变换原点：中心；
动画：rotOutZm向前1.8秒；
}
/*脉搏*/
@-webkit关键帧脉冲1{
0% {
-webkit转换：scale3d（1,1,1）；
变换：scale3d（1,1,1）；
}
50% {
-webkit转换：scale3d（1.05,1.05,1.05）；
转换：scale3d（1.05,1.05,1.05）；
}
100% {
-webkit转换：scale3d（1,1,1）；
变换：scale3d（1,1,1）；
}
}
@关键帧脉冲1{
0% {
-webkit转换：scale3d（1,1,1）；
变换：scale3d（1,1,1）；
}
50% {
-webkit转换：scale3d（1.05,1.05,1.05）；
转换：scale3d（1.05,1.05,1.05）；
}
100% {
-webkit转换：scale3d（1,1,1）；
变换：scale3d（1,1,1）；
}
}
/*法丹*/
@-webkit关键帧fadeIn1{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@关键帧fadeIn1{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
.fadeIn1{
-webkit动画名称：fadeIn1；
动画名称：fadeIn1；
-webkit动画延迟：0.5s；
动画延迟：0.5s；
}
/*生物风格*/
保险商实验室{
填充：20px 0 20px 20px；
浮动：左；
}
ulli{
显示：内联块；
浮动：左；
列表样式：无；
裕度：0 10px 0 0；
}
.脉冲1：悬停{
-webkit动画：脉冲10.8s；
/*狩猎4+*/
-moz动画：脉冲10.8s；
/*外汇5+*/
-o-动画：脉冲10.8s；
/*歌剧院12+*/
动画：脉冲10.8秒；
/*IE 10+，Fx 29+*/
}
ul li img，
ul li标签{
显示：块；
光标：指针；
}
ulli输入{
显示：无；
}
ul li输入：选中+叠加{
显示：表格；
}
.覆盖{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
显示：无；
z指数：999；
背景：rgb（0,0,0）；
背景：rgba（0,0,0,0.5）；
}
.重叠标签{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
.叠加img{
显示：内联；
边界：无；
填充：10px；
-webkit边界半径：10px；
-moz边界半径：10px；
边界半径：10px；
背景：白色；
}
.overlay label>img，
.content01{
边框：1px实心灰色80；
-moz盒阴影：5px 5px 10px黑色；
-网络工具包盒阴影：5px 5px 10px黑色；
盒影：5px 5px 10px黑色；
ul li label{
    width: 100px;
    height: 102px;
}